/* ============================================================
styles.css — extracted from index.html
Contains: Tailwind compiled reset + site CSS + product section CSS
============================================================ */
/* ---------- block start ---------- */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:'Manrope', sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:'Manrope', sans-serif;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-8{grid-column:span 8/span 8}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-9{height:2.25rem}.h-\[600px\]{height:600px}.h-\[72px\]{height:72px}.h-\[800px\]{height:800px}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-9{width:2.25rem}.w-\[800px\]{width:800px}.w-\[88vw\]{width:88vw}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-\[1100px\]{max-width:1100px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[640px\]{max-width:640px}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-16{row-gap:4rem}.gap-y-6{row-gap:1.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--border\)\]{border-color:var(--border)}.bg-\[var\(--border\)\]{background-color:var(--border)}.bg-\[var\(--border-strong\)\]{background-color:var(--border-strong)}.bg-\[var\(--ember\)\]{background-color:var(--ember)}.bg-\[var\(--surface-2\)\]{background-color:var(--surface-2)}.p-10{padding:2.5rem}.p-3{padding:.75rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-40{padding-top:10rem;padding-bottom:10rem}.pb-12{padding-bottom:3rem}.pb-24{padding-bottom:6rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.pt-24{padding-top:6rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:'Manrope', sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\],.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.text-\[var\(--ember\)\]{color:var(--ember)}.text-\[var\(--success\)\]{color:var(--success)}.text-\[var\(--text\)\]{color:var(--text)}.text-\[var\(--text-2\)\]{color:var(--text-2)}.text-\[var\(--text-3\)\]{color:var(--text-3)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-\[var\(--ember\)\]:hover{border-color:var(--ember)}.hover\:bg-\[var\(--surface-2\)\]:hover{background-color:var(--surface-2)}.hover\:text-\[var\(--ember\)\]:hover{color:var(--ember)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:block{display:block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:w-10{width:2.5rem}.md\:w-\[520px\]{width:520px}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:p-12{padding:3rem}.md\:px-10{padding-right:2.5rem}.md\:pl-10,.md\:px-10{padding-left:2.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:flex{display:flex}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}
/* ---------- block end ---------- */
/* ---------- block start ---------- */
:root {
--bg: #FAF8F5; /* warm ivory background */
--surface: #FFFFFF; /* pure white card surface */
--surface-2: #F4F1EC; /* hover / muted surface */
--surface-dark: #0C0C0E; /* ink black for dark accent sections */
--border: #E7E5E0; /* warm hairline */
--border-strong: #D6D3CD; /* stronger divider */
--text: #0C0C0E; /* ink black */
--text-2: #52525B; /* graphite */
--text-3: #8B8B93; /* muted */
--text-on-dark: #F5F5F4; /* text used on dark surfaces */
--ember: #D97706; /* deep amber — reads beautifully on ivory */
--ember-soft: #F59E0B; /* lighter amber for gradients */
--ember-deep: #92400E; /* deepest for borders/text emphasis */
--ember-tint: #FEF3E2; /* very soft amber surface tint */
--success: #047857;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
/* In-page anchors land below the fixed 72px nav, not under it */
section[id], [id][data-anchor] { scroll-margin-top: 88px; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Manrope', system-ui, sans-serif;
font-feature-settings: "ss01", "cv11";
overflow-x: hidden;
}
.font-display { font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.font-mono { font-family: 'Manrope', sans-serif; }
/* The Beam — repeating signature element */
.beam {
background: linear-gradient(90deg, transparent 0%, var(--ember) 50%, transparent 100%);
height: 1px;
}
.beam-glow {
position: absolute;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(217, 119, 6, 0.14) 0%, rgba(217, 119, 6, 0.04) 40%, transparent 70%);
}
/* Typography */
.eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
}
/* Hero variant — slightly larger, centered emphasis */
.hero-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
}
@media (max-width: 640px) {
.hero-eyebrow { font-size: 13px; letter-spacing: 0.16em; }
}
.ember-text {
color: var(--ember);
}
.hero-period {
color: var(--text);
}
.ember-gradient {
background: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hero "Illuminating" — cycles through 3 neon colors */
.neon-cycle {
color: var(--ember);
animation: neon-cycle-colors 9s ease-in-out infinite;
will-change: color, text-shadow;
}
@keyframes neon-cycle-colors {
0%, 100% {
color: #FF6B1A; /* neon orange */
text-shadow: 0 0 32px rgba(255, 107, 26, 0.35), 0 0 64px rgba(255, 107, 26, 0.15);
}
33% {
color: #2D7DFF; /* neon blue */
text-shadow: 0 0 32px rgba(45, 125, 255, 0.35), 0 0 64px rgba(45, 125, 255, 0.15);
}
66% {
color: #1FCB6E; /* neon green */
text-shadow: 0 0 32px rgba(31, 203, 110, 0.35), 0 0 64px rgba(31, 203, 110, 0.15);
}
}
/* Minimal hero background animation — slow drifting particles */
.hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-particles span {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--ember);
opacity: 0;
animation: particle-drift 14s linear infinite;
will-change: transform, opacity;
}
.hero-particles span:nth-child(1) { left: 8%; animation-delay: 0s; }
.hero-particles span:nth-child(2) { left: 18%; animation-delay: 1.5s; background: #2D7DFF; }
.hero-particles span:nth-child(3) { left: 28%; animation-delay: 3s; background: #1FCB6E; }
.hero-particles span:nth-child(4) { left: 38%; animation-delay: 4.5s; }
.hero-particles span:nth-child(5) { left: 48%; animation-delay: 6s; background: #2D7DFF; }
.hero-particles span:nth-child(6) { left: 58%; animation-delay: 7.5s; background: #1FCB6E; }
.hero-particles span:nth-child(7) { left: 68%; animation-delay: 9s; }
.hero-particles span:nth-child(8) { left: 78%; animation-delay: 10.5s; background: #2D7DFF; }
.hero-particles span:nth-child(9) { left: 88%; animation-delay: 12s; background: #1FCB6E; }
.hero-particles span:nth-child(10) { left: 95%; animation-delay: 13s; }
@keyframes particle-drift {
0% { transform: translateY(110%); opacity: 0; }
10% { opacity: 0.5; }
90% { opacity: 0.5; }
100% { transform: translateY(-10%); opacity: 0; }
}
/* Slow pulsing concentric rings behind hero — extremely subtle */
.hero-rings {
position: absolute;
left: 50%;
bottom: -100px;
transform: translateX(-50%);
width: 1200px;
height: 1200px;
pointer-events: none;
opacity: 0.35;
}
.hero-rings circle {
fill: none;
stroke: var(--ember);
stroke-width: 1;
transform-origin: center;
animation: ring-pulse 6s ease-out infinite;
}
.hero-rings circle:nth-child(2) { animation-delay: 2s; }
.hero-rings circle:nth-child(3) { animation-delay: 4s; }
@keyframes ring-pulse {
0% { stroke-opacity: 0; r: 60; }
20% { stroke-opacity: 0.4; }
100% { stroke-opacity: 0; r: 600; }
}
/* Subtle warm grid texture overlay for hero only */
.grid-overlay {
background-image:
linear-gradient(to right, rgba(12, 12, 14, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(12, 12, 14, 0.04) 1px, transparent 1px);
background-size: 64px 64px;
}
/* Buttons */
.btn-ember {
background: var(--text); /* ink black primary */
color: #FFFFFF;
font-weight: 600;
border-radius: 999px;
padding: 14px 24px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 400ms var(--ease);
border: 1px solid var(--text);
}
.btn-ember:hover {
background: var(--ember);
border-color: var(--ember);
transform: translateY(-1px);
box-shadow: 0 12px 32px -12px rgba(217, 119, 6, 0.5);
}
.btn-ghost {
background: transparent;
color: var(--text);
font-weight: 600;
border-radius: 999px;
padding: 14px 24px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border-strong);
transition: all 300ms var(--ease);
}
.btn-ghost:hover {
border-color: var(--text);
background: var(--surface);
}
.btn-ghost:hover .arrow-icon { transform: translateX(4px); }
.btn-ember .arrow-icon, .btn-ghost .arrow-icon { transition: transform 400ms var(--ease); }
.btn-ember:hover .arrow-icon { transform: translateX(4px); }
/* Cards */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 24px;
transition: all 500ms var(--ease);
}
.card:hover {
border-color: var(--border-strong);
box-shadow: 0 24px 48px -16px rgba(12, 12, 14, 0.08), 0 0 0 1px rgba(217, 119, 6, 0.15);
transform: translateY(-2px);
}
/* Trust ticker */
.ticker {
display: flex;
gap: 64px;
animation: ticker 40s linear infinite;
width: max-content;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-mask {
mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
/* Reveal on scroll — JS adds .js-ready to , only then we hide for animation */
.js-ready .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js-ready .reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
/* Hero ambient — soft warm halo from below */
.hero-glow {
position: absolute;
bottom: -200px;
left: 50%;
transform: translateX(-50%);
width: 1400px;
height: 700px;
background: radial-gradient(ellipse at center, rgba(217, 119, 6, 0.18) 0%, rgba(217, 119, 6, 0.04) 30%, transparent 60%);
pointer-events: none;
filter: blur(40px);
}
/* Mock dashboards — dark surfaces sit on ivory bg for premium contrast */
.mock {
/* Locally redefine theme tokens so all child Tailwind text-/bg- utilities render correctly on dark */
--text: #F5F5F4;
--text-2: #A1A1A6;
--text-3: #6B6B72;
--surface-2: #1C1C20;
--border: #27272A;
--border-strong: #34343C;
background: linear-gradient(180deg, #16161A 0%, #0C0C0E 100%);
border: 1px solid #27272A;
border-radius: 16px;
padding: 20px;
font-family: 'Manrope', sans-serif;
font-size: 11px;
color: #A1A1A6;
position: relative;
overflow: hidden;
box-shadow: 0 32px 64px -24px rgba(12, 12, 14, 0.18);
}
.mock-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid #27272A;
margin-bottom: 14px;
color: #F5F5F4;
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: #34343C; }
.mock-dot.live { background: var(--ember); box-shadow: 0 0 8px var(--ember); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* On small screens, give mocks a horizontal scroll fallback so columns don't crush */
@media (max-width: 767px) {
.mock-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.mock-scroll > .mock {
min-width: 540px;
}
}
/* Filter chip — dark variant inside mocks */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
color: var(--ember-soft);
}
.chip-muted {
background: #1C1C20;
border: 1px solid #27272A;
color: #A1A1A6;
}
/* Chip used outside mocks (on light bg) — different style */
.chip-light {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-2);
font-weight: 500;
}
/* Tabs */
.tab-btn {
position: relative;
padding: 18px 28px;
color: var(--text-3);
font-weight: 600;
transition: color 300ms var(--ease);
cursor: pointer;
background: transparent;
border: none;
font-family: inherit;
font-size: 18px;
letter-spacing: -0.01em;
}
@media (max-width: 768px) {
.tab-btn { font-size: 15px; padding: 14px 18px; }
}
.tab-btn.active { color: var(--text); }
.tab-indicator {
position: absolute;
bottom: 0;
height: 2px;
background: var(--ember);
transition: all 600ms var(--ease);
}
/* ===== Flip card (audience tab right side) ===== */
.flip-wrap {
width: 100%;
aspect-ratio: 9 / 10;
max-width: 420px;
margin: 0 auto;
perspective: 1400px;
cursor: pointer;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.flipper.flipped { transform: rotateY(180deg); }
.flip-face {
position: absolute;
inset: 0;
border-radius: 24px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
}
/* Front: photo */
.flip-front {
box-shadow:
0 30px 70px rgba(60, 20, 0, 0.55),
0 10px 24px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(217, 119, 6, 0.35),
inset 0 1px 0 rgba(255, 220, 120, 0.22);
}
.flip-front img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Back: editorial illuminated card */
.flip-back {
transform: rotateY(180deg);
background:
radial-gradient(ellipse 90% 70% at 20% 10%, rgba(255, 210, 100, 0.22) 0%, transparent 52%),
radial-gradient(ellipse 60% 50% at 88% 85%, rgba(180, 85, 8, 0.18) 0%, transparent 48%),
radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250, 238, 210, 1) 0%, rgba(242, 222, 186, 1) 100%);
box-shadow:
0 30px 70px rgba(60, 20, 0, 0.5),
0 10px 24px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(200, 148, 40, 0.6),
inset 0 1.5px 0 rgba(255, 235, 150, 0.7),
inset 0 -1px 0 rgba(120, 52, 4, 0.2);
}
.flip-back::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
}
.flip-back::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(180deg, transparent 0%, rgba(160, 80, 8, 0.09) 100%);
border-radius: 0 0 24px 24px;
pointer-events: none;
z-index: 1;
}
.flip-vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: 24px;
background: radial-gradient(ellipse 82% 82% at 50% 50%, transparent 55%, rgba(80, 30, 0, 0.12) 100%);
}
.flip-back-content {
position: relative;
z-index: 5;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12% 11% 10% 12%;
}
.flip-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 4.5px;
text-transform: uppercase;
color: rgba(120, 62, 8, 0.62);
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 12px;
text-shadow: 0 0 20px rgba(200, 120, 20, 0.18);
}
.flip-eyebrow::before {
content: '';
display: block;
width: 22px;
height: 1px;
background: linear-gradient(90deg, rgba(190, 120, 20, 0.6), rgba(190, 120, 20, 0.1));
flex-shrink: 0;
}
.flip-headline {
font-size: clamp(28px, 3.6vw, 38px);
line-height: 1.13;
letter-spacing: -0.04em;
font-family: var(--font-display, 'Manrope', sans-serif);
}
.flip-headline .l1 {
font-weight: 400;
color: #4b3d31;
font-size: 0.78em;
display: block;
margin-bottom: 1px;
}
.flip-headline .l2 {
font-weight: 700;
color: #d97706;
display: block;
text-shadow:
0 0 48px rgba(217, 119, 6, 0.4),
0 0 16px rgba(217, 119, 6, 0.2),
0 1px 2px rgba(120, 52, 0, 0.12);
}
.flip-headline .l3 {
font-weight: 700;
color: #1e1b18;
display: block;
text-shadow: 0 1px 3px rgba(100, 40, 0, 0.1);
}
.flip-rule {
width: 52px;
height: 1px;
background: linear-gradient(90deg, rgba(200, 148, 30, 0.75), rgba(200, 148, 30, 0.08));
margin: 24px 0 22px;
}
.flip-subtext {
font-size: 12px;
font-weight: 300;
font-style: italic;
color: rgba(70, 38, 6, 0.78);
line-height: 1.82;
letter-spacing: 0.01em;
max-width: 230px;
}
.flip-trust {
margin-top: 22px;
font-family: 'Manrope', sans-serif;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(120, 62, 8, 0.55);
}
/* Journey connector */
.journey-connector {
position: relative;
}
.journey-connector::before {
content: '';
position: absolute;
top: 28px;
left: calc(16.666% + 28px);
right: calc(16.666% + 28px);
height: 1px;
background-image: linear-gradient(90deg, var(--ember) 50%, transparent 50%);
background-size: 12px 1px;
opacity: 0.5;
}
@media (max-width: 1024px) {
.journey-connector::before { display: none; }
}
/* ============ Capital Journey — refined cards ============ */
.journey-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 400;
color: var(--text-3);
letter-spacing: -0.005em;
}
.journey-headline {
margin-top: 14px;
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(34px, 4.2vw, 60px);
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--text);
}
.journey-headline .ember-text { color: var(--ember); }
.journey-cta {
margin-top: 28px;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 17px;
color: var(--text);
text-decoration: none;
}
.journey-cta-line {
display: inline-block;
width: 38px;
height: 1.5px;
background: var(--text);
position: relative;
transition: width 350ms var(--ease);
}
.journey-cta-line::after {
content: '';
position: absolute;
right: -2px;
top: -4px;
width: 0; height: 0;
border-left: 8px solid var(--text);
border-top: 4.5px solid transparent;
border-bottom: 4.5px solid transparent;
}
.journey-cta:hover { color: var(--ember); }
.journey-cta:hover .journey-cta-line { background: var(--ember); width: 56px; }
.journey-cta:hover .journey-cta-line::after { border-left-color: var(--ember); }
/* Stepped 3-card layout with arc */
.journey-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: stretch;
position: relative;
margin-top: 64px;
}
@media (max-width: 1024px) { .journey-cards { grid-template-columns: 1fr; } }
.journey-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 22px;
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}
.journey-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(217,119,6,0.06) 0%, transparent 55%);
pointer-events: none;
transition: opacity 400ms var(--ease);
opacity: 0.7;
}
.journey-card:hover {
transform: translateY(-6px);
border-color: rgba(217,119,6,0.35);
box-shadow: 0 24px 48px -22px rgba(217,119,6,0.22);
}
.journey-card:hover::before { opacity: 1; }
.journey-card-num {
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--ember);
margin-bottom: 10px;
}
.journey-card-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--text);
margin-bottom: 8px;
text-align: left;
}
.journey-card-subtitle {
font-size: 14px;
color: var(--text-2);
line-height: 1.45;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px dashed var(--border);
}
.journey-card-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.journey-card-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
line-height: 1.5;
color: var(--text);
}
.journey-card-list .check {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ember-tint);
color: var(--ember);
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.journey-card-list .check svg { width: 12px; height: 12px; stroke-width: 2.5; }
.journey-card-list strong { color: var(--text); font-weight: 700; }
/* Background arc decoration (desktop only) */
.journey-arc {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
display: none;
}
@media (min-width: 1025px) { .journey-arc { display: block; } }
/* ============ Time is Capital — light, attractive bridge section ============ */
.tic-section {
position: relative;
}
.tic-card {
/* kept as no-op for legacy refs */
}
.tic-headline {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(40px, 4.6vw, 64px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
}
.tic-headline .ember-text { color: var(--ember); }
.tic-subhead {
margin-top: 22px;
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: clamp(14px, 1.1vw, 18px);
line-height: 1.45;
color: var(--text-2);
white-space: nowrap;
}
/* Centered hero intro layout (reference design parity) */
.tic-intro {
text-align: center;
max-width: 820px;
margin: 0 auto;
}
.tic-intro .tic-subhead {
margin-left: auto;
margin-right: auto;
max-width: 540px;
}
/* ============ Product Slider — 3-slide auto-rotate with animated visuals ============ */
.pslider {
position: relative;
border-radius: 28px;
overflow: hidden;
background: var(--surface-dark);
color: var(--text-on-dark);
box-shadow: 0 30px 60px -28px rgba(0,0,0,0.4);
}
.pslider::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 80% 20%, rgba(217,119,6,0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 20% 80%, rgba(217,119,6,0.06) 0%, transparent 55%);
pointer-events: none;
}
.pslider-viewport {
position: relative;
padding: 64px 56px;
min-height: 520px;
}
@media (max-width: 768px) {
.pslider-viewport { padding: 40px 24px; }
}
.pslide {
position: absolute;
inset: 64px 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 600ms var(--ease), transform 600ms var(--ease);
transform: translateY(8px);
}
.pslide.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
position: relative;
inset: auto;
}
@media (max-width: 1024px) {
.pslide { grid-template-columns: 1fr; gap: 32px; }
}
.pslide-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--accent, var(--ember));
margin-bottom: 14px;
}
.pslide-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.05;
letter-spacing: -0.025em;
color: #FFFFFF;
}
.pslide-body {
margin-top: 22px;
font-size: 15.5px;
line-height: 1.65;
color: rgba(255,255,255,0.7);
max-width: 520px;
}
.pslide-body p + p { margin-top: 8px; }
.pslide-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 32px;
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 16px;
color: var(--accent, var(--ember));
text-decoration: none;
transition: gap 250ms var(--ease);
}
.pslide-cta:hover { gap: 14px; }
.pslide-cta-arrow {
display: inline-block;
width: 26px;
height: 1.5px;
background: currentColor;
position: relative;
}
.pslide-cta-arrow::after {
content: '';
position: absolute;
right: -2px; top: -3.5px;
width: 0; height: 0;
border-left: 7px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
/* Visual panel */
.pslide-visual {
aspect-ratio: 1.25 / 1;
border-radius: 22px;
background: linear-gradient(135deg, #FCC419 0%, var(--ember-soft) 60%, var(--ember) 100%);
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px -28px rgba(217,119,6,0.55);
}
.pslide-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 30% 30%, rgba(255,255,255,0.18) 0%, transparent 55%),
radial-gradient(ellipse 50% 70% at 90% 90%, rgba(0,0,0,0.18) 0%, transparent 55%);
}
.pslide-visual-inner {
position: absolute;
inset: 24px;
z-index: 1;
}
/* === Originate visual: Filter chips animating + matching deals === */
.pviz-orig {
display: flex;
flex-direction: column;
height: 100%;
gap: 12px;
}
.pviz-orig-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pviz-chip {
padding: 5px 11px;
background: rgba(12,12,14,0.78);
color: #FFFFFF;
border-radius: 999px;
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 600;
border: 1px solid rgba(255,255,255,0.12);
transition: background 350ms var(--ease), transform 350ms var(--ease), border-color 350ms var(--ease);
}
.pviz-chip.active {
background: #0C0C0E;
border-color: rgba(255,255,255,0.4);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.pviz-orig-rows {
display: flex;
flex-direction: column;
gap: 5px;
background: rgba(12,12,14,0.5);
padding: 10px;
border-radius: 10px;
overflow: hidden;
min-height: 0;
}
.pviz-orig-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
background: rgba(255,255,255,0.06);
border-radius: 6px;
transition: opacity 400ms var(--ease), background 400ms var(--ease);
position: relative;
}
.pviz-orig-row.fade { opacity: 0.25; }
.pviz-orig-row.match { background: rgba(255,255,255,0.92); color: #0C0C0E; }
.pviz-orig-row.match .pviz-orig-bar { background: #0C0C0E; }
.pviz-orig-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,0.6);
flex-shrink: 0;
}
.pviz-orig-row.match .pviz-orig-dot { background: var(--ember); }
.pviz-orig-bar {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.4);
border-radius: 2px;
}
.pviz-orig-tag {
font-family: 'Manrope', sans-serif;
font-size: 9px;
color: rgba(255,255,255,0.55);
flex-shrink: 0;
}
.pviz-orig-row.match .pviz-orig-tag { color: rgba(12,12,14,0.65); }
.pviz-orig-banner {
background: #0C0C0E;
color: #FFFFFF;
padding: 10px 14px;
border-radius: 8px;
text-align: center;
font-family: 'Manrope', sans-serif;
font-size: 12.5px;
font-weight: 600;
}
.pviz-orig-banner-num { color: var(--ember); font-weight: 800; font-size: 16px; margin-right: 4px; }
/* === Strata visual: animated scorecard bars filling === */
.pviz-strata {
background: rgba(12,12,14,0.78);
height: 100%;
border-radius: 12px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.pviz-strata-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pviz-strata-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 13px;
color: #FFFFFF;
}
.pviz-strata-grade {
font-family: 'Manrope', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--ember);
background: rgba(217,119,6,0.15);
padding: 4px 10px;
border-radius: 6px;
}
.pviz-strata-rows {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.pviz-strata-row {
display: grid;
grid-template-columns: 90px 1fr 32px;
gap: 12px;
align-items: center;
}
.pviz-strata-label {
font-family: 'Manrope', sans-serif;
font-size: 9.5px;
color: rgba(255,255,255,0.6);
letter-spacing: 0.04em;
}
.pviz-strata-bar {
height: 7px;
background: rgba(0,0,0,0.45);
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
}
.pviz-strata-bar-fill {
height: 100%;
background: linear-gradient(90deg, #FCC419 0%, #FFA94D 100%);
border-radius: 3px;
width: 0;
transition: width 1200ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 8px rgba(255,169,77,0.6);
}
.pslide.active .pviz-strata-bar-fill {
width: var(--bar-target, 0%);
}
.pviz-strata-val {
font-family: 'Manrope', sans-serif;
font-size: 10.5px;
font-weight: 700;
color: #FFFFFF;
text-align: right;
}
.pviz-strata-footer {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Manrope', sans-serif;
font-size: 9.5px;
color: rgba(255,255,255,0.5);
letter-spacing: 0.06em;
}
.pviz-strata-footer span:last-child { color: var(--ember); }
/* === Eye visual: scanning iris with sweeping radar === */
.pviz-eye {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.pviz-eye-svg {
width: 100%;
height: 100%;
}
.pviz-eye .scan-line {
transform-origin: 50% 50%;
animation: pviz-eye-scan 4s linear infinite;
}
@keyframes pviz-eye-scan {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.pviz-eye .pulse-ring {
transform-origin: 50% 50%;
animation: pviz-eye-pulse 3s ease-out infinite;
transform-box: fill-box;
}
.pviz-eye .pulse-ring.delay-1 { animation-delay: 1s; }
.pviz-eye .pulse-ring.delay-2 { animation-delay: 2s; }
@keyframes pviz-eye-pulse {
0% { transform: scale(0.6); opacity: 0.9; }
70% { transform: scale(1.4); opacity: 0; }
100% { transform: scale(1.4); opacity: 0; }
}
.pviz-eye-checks {
position: absolute;
bottom: 6%;
left: 6%;
right: 6%;
display: flex;
gap: 6px;
}
.pviz-eye-check {
flex: 1;
background: rgba(12,12,14,0.85);
color: #FFFFFF;
padding: 8px 10px;
border-radius: 8px;
font-family: 'Manrope', sans-serif;
font-size: 10.5px;
font-weight: 600;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.pviz-eye-check svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Slider indicators */
.pslider-indicators {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 0 56px 24px;
position: relative;
}
.pslider-dot {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.18);
border: none;
cursor: pointer;
padding: 0;
transition: background 250ms var(--ease), width 400ms var(--ease);
position: relative;
overflow: hidden;
}
.pslider-dot:hover { background: rgba(255,255,255,0.4); }
.pslider-dot.active { width: 56px; }
.pslider-dot.active::after {
content: '';
position: absolute;
inset: 0;
background: var(--ember);
transform-origin: left;
animation: pslider-progress var(--pslider-duration, 7s) linear forwards;
}
@keyframes pslider-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.pslider.pslider-paused .pslider-dot.active::after { animation-play-state: paused; }
/* Slider tab labels above dots */
.pslider-tabs {
display: flex;
justify-content: center;
gap: 36px;
padding: 28px 56px 8px;
}
.pslider-tab {
background: transparent;
border: none;
color: rgba(255,255,255,0.45);
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
padding: 4px 0;
cursor: pointer;
transition: color 300ms var(--ease);
text-transform: uppercase;
}
.pslider-tab:hover { color: rgba(255,255,255,0.85); }
.pslider-tab.active { color: var(--ember); }
@media (max-width: 640px) { .pslider-tabs { gap: 16px; padding-left: 24px; padding-right: 24px; } .pslider-tab { font-size: 10px; } }
/* Testimonial scroll */
.scroll-row {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
/* Nav scrolled */
.nav-scrolled {
background: rgba(250, 248, 245, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
/* Stat number sizing — bold sans, inspired by Brex/Ramp */
.stat-number {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(64px, 9vw, 112px);
line-height: 1;
letter-spacing: -0.04em;
color: var(--text);
}
/* Hero headline — Manrope ExtraBold at scale */
.hero-headline {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(52px, 8vw, 112px);
line-height: 1.0;
letter-spacing: -0.035em;
}
/* Hero scroll-down indicator — gentle drift below CTA */
.hero-scroll-indicator {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--text-2);
text-decoration: none;
transition: color 300ms var(--ease);
}
.hero-scroll-indicator:hover { color: var(--ember); }
.hero-scroll-indicator .scroll-line {
width: 1.5px;
height: 40px;
background: linear-gradient(180deg, transparent 0%, var(--text-2) 50%, var(--text) 100%);
opacity: 0.85;
}
.hero-scroll-indicator .scroll-arrow {
width: 26px;
height: 26px;
animation: scroll-arrow-bob 2.4s ease-in-out infinite;
}
@keyframes scroll-arrow-bob {
0%, 100% { transform: translateY(0); opacity: 0.95; }
50% { transform: translateY(8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-scroll-indicator .scroll-arrow { animation: none; }
}
/* Section headline — slightly less bold than hero, still confident */
.section-headline {
font-family: 'Manrope', sans-serif;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
}
/* Bar viz */
.bar-fill {
background: linear-gradient(90deg, var(--ember) 0%, var(--ember-soft) 100%);
height: 100%;
border-radius: 2px;
transform-origin: left;
}
/* Sparkline */
.sparkline path { fill: none; stroke-width: 1.5; }
/* ============ Product sections (Originate / Strata / Eye) — 3 stacked light sections ============ */
.psec {
position: relative;
overflow: hidden;
}
/* Soft accent wash behind each section */
.psec::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 90% 10%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%),
radial-gradient(ellipse 40% 60% at 10% 90%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
}
.psec > * { position: relative; z-index: 1; }
.psec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 1024px) {
.psec-grid { grid-template-columns: 1fr; gap: 48px; }
/* On mobile, force visual second so reading order is copy-then-visual everywhere */
.psec-flip .psec-visual { order: 2; }
.psec-flip .psec-copy { order: 1; }
}
.psec-copy { display: flex; flex-direction: column; }
.psec-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 22px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.psec-eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.psec-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
margin: 0 0 24px;
}
.psec-body {
font-family: 'Manrope', sans-serif;
font-size: 17px;
line-height: 1.6;
color: var(--text-2);
max-width: 520px;
}
.psec-body p { margin: 0; }
.psec-body p + p { margin-top: 10px; }
/* Reference-design copy classes: subtitle + bullet points + multi-CTA row */
.psec-sub {
margin-top: 14px;
font-family: 'Manrope', sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--text-2);
max-width: 480px;
}
.psec-points {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 480px;
}
.psec-point {
position: relative;
padding-left: 18px;
font-family: 'Manrope', sans-serif;
font-size: 14.5px;
color: var(--text-2);
line-height: 1.55;
}
.psec-point::before {
content: '';
position: absolute;
left: 0;
top: 0.65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 80%, var(--text-3));
}
.psec-cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.psec-cta-row .psec-cta { margin-top: 0; align-self: flex-start; }
.psec-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 32px;
padding: 14px 26px;
border-radius: 999px;
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 15px;
text-decoration: none;
background: var(--text);
color: #FFFFFF;
border: 1.5px solid var(--text);
transition: background 280ms var(--ease), border-color 280ms var(--ease), transform 280ms var(--ease), gap 280ms var(--ease);
align-self: flex-start;
}
.psec-cta:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-1px);
gap: 14px;
}
.psec-cta-arrow {
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
transition: transform 280ms var(--ease);
}
/* Visual container — light card with subtle accent border + accent-tinted glow */
.psec-visual {
position: relative;
aspect-ratio: 1.2 / 1;
border-radius: 24px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%,
color-mix(in srgb, var(--accent) 12%, var(--surface)) 100%);
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--accent) 50%, transparent);
}
.psec-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 80% 20%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 20% 80%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%);
pointer-events: none;
}
.psec-visual-inner {
position: relative;
z-index: 1;
width: 88%;
height: 88%;
display: flex;
align-items: center;
justify-content: center;
}
/* Originate inner visual sits inside .psec-visual-inner.pviz-orig — give it light surface */
.psec-visual-inner.pviz-orig,
.psec-visual-inner.pviz-strata,
.psec-visual-inner.pviz-eye {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 18px 40px -22px rgba(12,12,14,0.18);
padding: 28px 30px;
width: 100%;
height: auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
}
/* Override colors of inner visuals (originally white-on-dark) so they read on light card */
.psec-visual .pviz-orig-rows .pviz-orig-row {
background: rgba(255,107,26,0.06);
border: 1px solid rgba(255,107,26,0.18);
color: var(--text);
}
.psec-visual .pviz-orig-row.match {
background: rgba(255,107,26,0.18);
border-color: var(--accent);
color: var(--text);
}
.psec-visual .pviz-orig-row.match .pviz-orig-bar { background: var(--accent); }
.psec-visual .pviz-orig-banner {
background: var(--accent);
color: #FFFFFF;
}
.psec-visual .pviz-chip {
background: rgba(255,107,26,0.10);
color: var(--text);
border-color: rgba(255,107,26,0.32);
}
.psec-visual .pviz-chip.on {
background: var(--accent);
color: #FFFFFF;
border-color: var(--accent);
}
/* Strata light tweaks */
.psec-visual .pviz-strata-header,
.psec-visual .pviz-strata-footer { color: var(--text); }
.psec-visual .pviz-strata-title { color: var(--text-3); }
.psec-visual .pviz-strata-grade {
background: var(--accent);
color: #FFFFFF;
}
.psec-visual .pviz-strata-label { color: var(--text-3); }
.psec-visual .pviz-strata-bar {
background: rgba(45,125,255,0.08);
border: none;
display: block;
}
.psec-visual .pviz-strata-bar-fill {
display: block;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
box-shadow: 0 0 10px rgba(45,125,255,0.45);
}
.psec-visual .pviz-strata-val { color: var(--text); }
/* Eye light tweaks */
.psec-visual .pviz-eye-check {
background: rgba(31,203,110,0.10);
color: var(--text);
border-color: rgba(31,203,110,0.32);
}
@media (max-width: 768px) {
.psec { padding-top: 64px; padding-bottom: 64px; }
.psec-visual { aspect-ratio: 1.05 / 1; }
.psec-visual-inner.pviz-orig,
.psec-visual-inner.pviz-strata,
.psec-visual-inner.pviz-eye { padding: 18px 18px; }
}
/* When strata section is "in view", fill the bars (replaces old .pslide.active gating) */
.psec-visual.is-active .pviz-strata-bar-fill {
width: var(--bar-target, 0%);
}
/* Banner number visible on orange banner */
.psec-visual .pviz-orig-banner-num {
color: #FFFFFF;
font-weight: 800;
font-size: 16px;
margin-right: 4px;
}
/* ============ Inline product animations — iframe hosts (Originate / Strata / Eye) ============ */
/* These three sections embed the reference Finhive animation design as srcdoc iframes. */
/* The accent gradient/border on .psec-visual is removed for these sections so the */
/* iframe's own warm-beige background can extend edge-to-edge, matching the reference design. */
#originate .psec-visual,
#strata .psec-visual,
#eye .psec-visual {
background: transparent;
border: 0;
box-shadow: none;
aspect-ratio: auto;
min-height: 500px;
padding: 0;
}
#originate .psec-visual::before,
#strata .psec-visual::before,
#eye .psec-visual::before {
display: none;
}
#originate .psec-visual-inner,
#strata .psec-visual-inner,
#eye .psec-visual-inner {
width: 100%;
height: 100%;
min-height: 480px;
display: block;
border-radius: 20px;
overflow: hidden;
}
/* The iframe injected inside each host */
#origAnim, #strataAnim, #tripleAnim {
width: 100%;
height: 100%;
min-height: 480px;
display: block;
}
#origAnim iframe,
#strataAnim iframe,
#tripleAnim iframe {
display: block;
width: 100% !important;
height: 100% !important;
min-height: 480px;
border: 0 !important;
border-radius: 20px;
background: transparent;
}
@media (max-width: 900px) {
#originate .psec-visual,
#strata .psec-visual,
#eye .psec-visual { min-height: 460px; }
#origAnim, #strataAnim, #tripleAnim,
#origAnim iframe, #strataAnim iframe, #tripleAnim iframe { min-height: 440px; }
}
/* ============ Stage cards (Four Stages section) ============ */
.stage-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 28px 0 28px;
display: flex;
flex-direction: column;
transition: all 300ms var(--ease);
overflow: hidden;
position: relative;
}
.stage-card:hover {
border-color: var(--ember-soft);
transform: translateY(-2px);
box-shadow: 0 12px 32px -16px rgba(217, 119, 6, 0.18);
}
.stage-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.stage-card-text {
flex: 1;
min-width: 0;
}
.stage-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
color: var(--ember);
opacity: 0.85;
transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}
.stage-card:hover .stage-icon {
transform: scale(1.05);
opacity: 1;
}
.stage-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
margin-bottom: 24px;
font-size: 13px;
color: var(--ember);
font-weight: 500;
text-decoration: none;
}
.stage-card-art {
margin: 16px -28px 0;
height: 80px;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}
.stage-card-art svg {
width: 100%;
height: 100%;
display: block;
}
/* ============ Why Lenders Choose Us — four stage cards ============ */
.fh-stages {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
align-items: stretch;
}
@media (max-width: 1200px) { .fh-stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .fh-stages { grid-template-columns: 1fr; gap: 18px; } }
.fh-card {
min-height: 590px;
border-radius: 22px;
background: var(--surface);
border: 1px solid rgba(217,120,0,.18);
box-shadow: 0 10px 28px rgba(44,31,15,.07);
padding: 30px 28px 28px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.fh-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(44,31,15,.12);
}
.fh-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 22px;
}
.fh-card-name {
font-family: 'Manrope', sans-serif;
font-size: 26px;
line-height: 1.12;
letter-spacing: -0.045em;
font-weight: 700;
color: var(--text);
}
.fh-card-desc {
font-size: 15px;
line-height: 1.52;
letter-spacing: -0.018em;
color: var(--text-2);
font-weight: 400;
margin-bottom: 22px;
}
.fh-card-lm {
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
font-size: 14px;
line-height: 1;
font-weight: 600;
color: var(--text);
text-decoration: none;
margin-bottom: 28px;
transition: gap 250ms var(--ease), color 250ms var(--ease);
}
.fh-card-lm:hover { gap: 12px; color: var(--ember); }
.fh-card-icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
color: var(--text);
opacity: 0.7;
}
.fh-visual-zone {
margin-top: auto;
min-height: 330px;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* ORIGINATE */
.fh-orig-screen {
width: 100%;
height: 332px;
border-radius: 17px;
background: linear-gradient(180deg, #fff5e7 0%, #fff0da 100%);
border: 1px solid #f5bd76;
padding: 18px 18px 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.fh-window-dots { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.fh-window-dots span { width: 8px; height: 8px; border-radius: 50%; background: #efbd79; }
.fh-window-line { height: 6px; border-radius: 999px; background: #f4d9b6; flex: 1; margin-left: 6px; }
.fh-visual-label {
font-family: 'Manrope', sans-serif;
text-transform: uppercase;
letter-spacing: .30em;
color: #b96c26;
font-size: 11px;
font-weight: 600;
margin-bottom: 14px;
}
.fh-skeleton-list { display: grid; gap: 8px; margin-bottom: 16px; }
.fh-skeleton-row {
height: 25px; border-radius: 8px; background: rgba(255,255,255,.68);
display: flex; align-items: center; gap: 10px; padding: 0 10px;
}
.fh-sq { width: 12px; height: 12px; border-radius: 3px; background: #f2c184; }
.fh-line { height: 5px; border-radius: 999px; background: #f2d5ae; flex: 1; }
.fh-orig-callout {
background: white;
border-radius: 15px;
min-height: 130px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
border: 1px solid rgba(201,117,18,.07);
box-shadow: 0 13px 22px rgba(139,83,16,.08);
}
.fh-big-num { font-size: 44px; line-height: 1; font-weight: 800; color: var(--ember); letter-spacing: -.06em; margin-bottom: 8px; }
.fh-call-main { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.fh-dash { width: 82%; border-top: 1px dashed rgba(217,120,0,.28); margin: 10px 0; }
.fh-call-sub {
font-family: 'Manrope', sans-serif;
text-transform: uppercase; letter-spacing: .26em; font-size: 10px; font-weight: 700; color: var(--ember);
}
/* UNDERWRITING */
.fh-under-browser {
width: 100%;
height: 330px;
border-radius: 17px;
border: 1px solid rgba(245,189,118,.75);
background: #fff;
overflow: hidden;
box-shadow: 0 10px 24px rgba(217,120,0,.06);
}
.fh-browser-top {
height: 34px; background: #fff8ef; border-bottom: 1px solid rgba(217,120,0,.18);
display: flex; align-items: center; gap: 7px; padding: 0 14px;
}
.fh-browser-dot { width: 9px; height: 9px; border-radius: 50%; }
.fh-browser-dot.r { background: #f15b4f; }
.fh-browser-dot.y { background: #f5c043; }
.fh-browser-dot.g { background: #30c45b; }
.fh-urlbar { height: 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: #fff; flex: 1; margin-left: 10px; }
.fh-score-window {
height: 296px;
background: white;
padding: 20px 18px 14px;
position: relative;
overflow: hidden;
}
.fh-score-window::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.55) 58%,rgba(255,255,255,.88)),
repeating-linear-gradient(0deg, rgba(40,110,180,.18) 0 1px, transparent 1px 32px);
filter: blur(7px);
opacity: .88;
}
.fh-st-list { position: relative; z-index: 2; display: grid; gap: 8px; width: 48px; }
.fh-st {
height: 23px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,.10);
}
.fh-st1, .fh-st2, .fh-st3 { background: #0c67b3; }
.fh-st4 { background: #ef7b00; }
.fh-st5 { background: #f68c13; }
.fh-st6 { background: #e64226; }
.fh-st7 { background: #ba201b; }
.fh-fake-bars {
position: absolute; left: 82px; right: 18px; top: 22px; z-index: 1;
display: grid; gap: 15px; opacity: .33; filter: blur(4px);
}
.fh-fake-bars div { height: 12px; background: #7cbde8; border-radius: 999px; }
.fh-grade-strip {
position: absolute; left: 18px; right: 18px; bottom: 14px; height: 22px;
border-radius: 4px; filter: blur(3px);
background: linear-gradient(90deg, #1b74b8 0 42%, #ec7d00 42% 72%, #e84427 72% 100%);
opacity: .75;
}
/* PORTFOLIO ACTION */
.fh-portfolio-image-holder {
width: 100%;
height: 338px;
border-radius: 16px;
border: 1px solid rgba(245,189,118,.75);
background: linear-gradient(180deg, #fff5e7 0%, #fff0da 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 12px 28px rgba(198,117,24,0.08);
}
.fh-portfolio-action-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
/* ============ Stat band + audience intro (orange + dark) ============ */
.stat-band {
background: linear-gradient(135deg, var(--ember) 0%, #E08110 100%);
border-radius: 24px 24px 0 0;
padding: 56px 48px 52px;
color: #FFFFFF;
position: relative;
overflow: hidden;
}
.stat-band::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 90% 30%, rgba(255,255,255,0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 70% at 10% 80%, rgba(0,0,0,0.08) 0%, transparent 60%);
pointer-events: none;
}
.stat-band-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
@media (max-width: 900px) { .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
@media (max-width: 520px) { .stat-band-grid { grid-template-columns: 1fr; } }
.stat-band-num {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(38px, 4.5vw, 60px);
line-height: 1.0;
letter-spacing: -0.025em;
color: #FFFFFF;
display: block;
white-space: nowrap;
}
.stat-band-num.tight {
font-size: clamp(32px, 3.6vw, 48px);
}
.stat-band-num .num-prefix,
.stat-band-num .num-suffix {
font-weight: 600;
opacity: 0.92;
}
.stat-band-num .num-value {
display: inline-block;
transition: transform 200ms var(--ease);
}
.stat-band-cap {
margin-top: 14px;
font-size: 15px;
line-height: 1.4;
color: rgba(255,255,255,0.9);
font-weight: 400;
}
/* Live ticking number subtle pulse */
.stat-band-live {
position: relative;
padding-right: 4px;
}
.stat-band-live::after {
content: '';
position: absolute;
top: 6px;
right: -16px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
animation: stat-band-pulse 1.6s ease-in-out infinite;
}
@keyframes stat-band-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); opacity: 0.95; }
70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); opacity: 1; }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 0.95; }
}
/* Dark band underneath */
.audience-band {
background: #0A0A0B;
border-radius: 0 0 24px 24px;
padding: 64px 48px 60px;
color: #FFFFFF;
text-align: center;
}
.audience-band-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 400;
color: rgba(255,255,255,0.85);
letter-spacing: -0.01em;
}
.audience-band-title {
margin-top: 6px;
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.1;
letter-spacing: -0.02em;
color: #FFFFFF;
}
.audience-band-title .ember {
color: var(--ember);
}
.audience-pills {
margin-top: 36px;
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
background: var(--ember);
padding: 8px;
border-radius: 18px;
box-shadow: 0 18px 40px -16px rgba(217,119,6,0.45);
max-width: 100%;
}
.audience-pill {
background: #0A0A0B;
color: #FFFFFF;
padding: 18px 28px;
border-radius: 12px;
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 1.3;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 250ms var(--ease), transform 250ms var(--ease);
text-align: center;
flex: 1 1 auto;
min-width: 200px;
}
.audience-pill:hover {
background: #1A1A1C;
transform: translateY(-2px);
}
.audience-pill:active { transform: translateY(0); }
@media (max-width: 768px) {
.stat-band, .audience-band { padding-left: 24px; padding-right: 24px; }
.audience-pills { flex-direction: column; width: 100%; gap: 6px; }
.audience-pill { width: 100%; }
}
/* ============ Auto-rotating Audience Showcase (dark) ============ */
.audshow {
background: #0A0A0B;
color: #FFFFFF;
border-radius: 24px;
padding: 64px 56px 56px;
overflow: hidden;
position: relative;
}
.audshow::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(217,119,6,0.15) 0%, transparent 60%);
pointer-events: none;
}
.audshow-header { text-align: center; position: relative; }
.audshow-eyebrow {
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 400;
color: rgba(255,255,255,0.85);
letter-spacing: -0.01em;
}
.audshow-title {
margin-top: 4px;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.12;
letter-spacing: -0.02em;
color: #FFFFFF;
}
/* Tab progress bar */
.audshow-tabbar {
margin: 36px auto 0;
max-width: 980px;
background: var(--ember);
border-radius: 14px;
padding: 6px;
display: flex;
gap: 4px;
position: relative;
box-shadow: 0 16px 40px -16px rgba(217,119,6,0.5);
}
.audshow-tab {
flex: 1 1 0;
background: transparent;
border: none;
color: rgba(255,255,255,0.85);
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 14.5px;
padding: 14px 18px;
border-radius: 10px;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 250ms var(--ease);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.audshow-tab:hover { color: #FFFFFF; }
.audshow-tab.active { color: #FFFFFF; }
.audshow-tab-active-bg {
position: absolute;
top: 6px;
left: 6px;
height: calc(100% - 12px);
background: #0A0A0B;
border: 1.5px solid var(--ember-soft);
border-radius: 10px;
z-index: 1;
transition: left 600ms cubic-bezier(0.65, 0, 0.35, 1), width 600ms cubic-bezier(0.65, 0, 0.35, 1);
box-shadow: inset 0 0 0 0 var(--ember);
}
/* Content panels */
.audshow-content { margin-top: 48px; position: relative; min-height: 360px; }
.audshow-panel {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
opacity: 0;
pointer-events: none;
position: absolute;
inset: 0;
transition: opacity 450ms var(--ease), transform 450ms var(--ease);
transform: translateY(8px);
}
.audshow-panel.active {
opacity: 1;
pointer-events: auto;
position: relative;
transform: translateY(0);
}
.audshow-panel > * { min-width: 0; }
@media (max-width: 900px) { .audshow-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.audshow-headline {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.15;
letter-spacing: -0.02em;
color: #FFFFFF;
}
.audshow-headline .ember { color: var(--ember); }
.audshow-body {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.78);
}
.audshow-lenderbox {
margin-top: 28px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 22px 24px;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.audshow-lenderbox-label {
font-family: 'Manrope', sans-serif;
font-size: 10.5px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.55);
margin-bottom: 12px;
}
.audshow-lenderbox-marquee {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.audshow-lenderbox-track {
display: flex;
gap: 36px;
white-space: nowrap;
animation: audshow-marquee 28s linear infinite;
width: max-content;
}
.audshow-lender-name {
font-family: 'Manrope', sans-serif;
font-size: 17px;
font-weight: 500;
color: #FFFFFF;
}
.audshow-lender-sep {
color: var(--ember);
opacity: 0.6;
}
@keyframes audshow-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Right side feature visual */
.audshow-visual {
background: linear-gradient(135deg, var(--ember) 0%, #C66509 100%);
border-radius: 22px;
aspect-ratio: 4 / 3;
position: relative;
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(217,119,6,0.55);
display: flex;
align-items: center;
justify-content: center;
}
.audshow-visual::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 90% at 90% 10%, rgba(255,255,255,0.18) 0%, transparent 55%),
radial-gradient(ellipse 50% 80% at 10% 90%, rgba(0,0,0,0.18) 0%, transparent 55%);
}
.audshow-visual-svg {
position: relative;
z-index: 1;
width: 70%;
height: 70%;
}
@media (max-width: 768px) {
.audshow { padding: 40px 24px 36px; }
.audshow-tabbar { flex-direction: column; gap: 4px; padding: 6px; }
.audshow-tab-active-bg { display: none; }
.audshow-tab.active { background: #0A0A0B; border: 1.5px solid var(--ember-soft); }
}
/* ============ 4-Slide Audience Carousel ============ */
.audcarousel {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 60px -28px rgba(0,0,0,0.25);
}
.audcarousel-viewport {
position: relative;
width: 100%;
}
.audcarousel-track {
position: relative;
}
.audcarousel-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 600ms var(--ease);
will-change: opacity;
}
.audcarousel-slide.active {
opacity: 1;
pointer-events: auto;
position: relative;
}
/* Slide indicators (bottom dots / progress) */
.audcarousel-indicators {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 24px;
}
.audcarousel-dot {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(217, 119, 6, 0.25);
border: none;
cursor: pointer;
padding: 0;
transition: background 250ms var(--ease), width 400ms var(--ease);
position: relative;
overflow: hidden;
}
.audcarousel-dot:hover { background: rgba(217, 119, 6, 0.5); }
.audcarousel-dot.active {
width: 56px;
background: rgba(217, 119, 6, 0.25);
}
.audcarousel-dot.active::after {
content: '';
position: absolute;
inset: 0;
background: var(--ember);
transform-origin: left;
animation: audcarousel-progress var(--carousel-duration, 6s) linear forwards;
}
@keyframes audcarousel-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.audcarousel-pause-state .audcarousel-dot.active::after {
animation-play-state: paused;
}
/* Audience showcase tweaks for slide variant — eliminate duplicate borders */
.audcarousel .audshow,
.audcarousel .stat-band,
.audcarousel .audience-band {
border-radius: 0;
}
/* "No Credit Team" overlay tagline on Family Offices visual */
.audshow-visual-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px;
z-index: 2;
}
.audshow-visual-overlay-text {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.25;
color: #FFFFFF;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.audshow-visual-overlay-text strong {
display: block;
margin-top: 6px;
font-size: clamp(20px, 2.2vw, 30px);
font-weight: 800;
}
.audshow-visual.with-overlay .audshow-visual-svg { opacity: 0.35; width: 60%; height: 60%; }
/* ============ Closing CTA — two-column with logo card (dark) ============ */
.cta-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 1024px) { .cta-grid { grid-template-columns: 1fr; gap: 56px; } }
.cta-headline {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text-on-dark);
}
.cta-headline .ember-gradient {
background: linear-gradient(135deg, #F59E0B 0%, var(--ember) 50%, #B45309 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.cta-body {
margin-top: 28px;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.6;
color: #A1A1A6;
max-width: 560px;
}
.cta-buttons {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.cta-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ember);
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
padding: 16px 28px;
border-radius: 12px;
text-decoration: none;
transition: all 300ms var(--ease);
box-shadow: 0 8px 24px -8px rgba(217,119,6,0.5);
}
.cta-btn-primary:hover {
background: var(--ember-soft);
transform: translateY(-1px);
box-shadow: 0 14px 32px -10px rgba(217,119,6,0.65);
}
.cta-btn-primary .arrow-icon { transition: transform 300ms var(--ease); }
.cta-btn-primary:hover .arrow-icon { transform: translateX(4px); }
.cta-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--text-on-dark);
font-weight: 500;
font-size: 15px;
padding: 16px 24px;
border-radius: 12px;
border: 1px solid #2A2A2E;
text-decoration: none;
transition: all 300ms var(--ease);
}
.cta-btn-ghost:hover {
border-color: var(--ember);
color: var(--ember);
transform: translateY(-1px);
}
/* Outlined ember button (Connect with our Team) — matches screenshot */
.cta-btn-outline-ember {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--ember);
font-weight: 600;
font-size: 15px;
padding: 16px 26px;
border-radius: 12px;
border: 1.5px solid var(--ember);
text-decoration: none;
transition: all 300ms var(--ease);
}
.cta-btn-outline-ember:hover {
background: rgba(217,119,6,0.10);
color: #FBBF60;
border-color: #FBBF60;
transform: translateY(-1px);
box-shadow: 0 8px 24px -10px rgba(217,119,6,0.55);
}
.cta-btn-outline-ember .arrow-icon-2 { transition: transform 300ms var(--ease); }
.cta-btn-outline-ember:hover .arrow-icon-2 { transform: translateX(4px); }
/* ── Yield illustration stage ── */
.cta-yield-stage {
position: relative;
width: 100%;
aspect-ratio: 700 / 540;
max-width: 640px;
margin: 0 auto;
}
.cta-yield-aura {
position: absolute;
inset: -10% -8% -6% -8%;
background:
radial-gradient(ellipse at 70% 35%, rgba(217,119,6,0.18) 0%, rgba(217,119,6,0) 55%),
radial-gradient(ellipse at 35% 75%, rgba(70,110,170,0.18) 0%, rgba(70,110,170,0) 60%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
.cta-yield-svg {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Bar animations removed — bars render statically at full size. */
.cta-bar {
transform-origin: center bottom;
animation: none;
opacity: 1;
}
.cta-bar-1, .cta-bar-2, .cta-bar-3, .cta-bar-4, .cta-bar-5 {
animation-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.cta-bar { animation: none; }
}
/* Logo card (right column) */
.cta-logo-card {
position: relative;
aspect-ratio: 1.15 / 1;
border-radius: 28px;
background:
radial-gradient(ellipse 70% 80% at 50% 50%, rgba(217,119,6,0.18) 0%, transparent 65%),
linear-gradient(145deg, #141416 0%, #0F0F11 100%);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 30px 60px -30px rgba(217,119,6,0.4),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.cta-logo-card::before {
content: '';
position: absolute;
width: 140%;
height: 140%;
top: -20%;
left: -20%;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 50deg,
rgba(217,119,6,0.18) 90deg,
rgba(245,158,11,0.25) 130deg,
transparent 200deg,
transparent 360deg
);
animation: cta-logo-rotate 18s linear infinite;
z-index: 0;
}
.cta-logo-card::after {
content: '';
position: absolute;
inset: 12px;
border-radius: 22px;
background:
radial-gradient(ellipse 60% 70% at 50% 50%, rgba(217,119,6,0.10) 0%, transparent 60%),
linear-gradient(145deg, #0E0E10 0%, #0A0A0C 100%);
z-index: 1;
}
@keyframes cta-logo-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* concentric pulse rings */
.cta-logo-rings {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.cta-logo-rings span {
position: absolute;
border: 1px solid rgba(217,119,6,0.25);
border-radius: 50%;
animation: cta-logo-pulse 4s ease-out infinite;
}
.cta-logo-rings span:nth-child(1) { width: 30%; height: 30%; animation-delay: 0s; }
.cta-logo-rings span:nth-child(2) { width: 30%; height: 30%; animation-delay: 1.3s; }
.cta-logo-rings span:nth-child(3) { width: 30%; height: 30%; animation-delay: 2.6s; }
@keyframes cta-logo-pulse {
0% { transform: scale(0.8); opacity: 0; border-color: rgba(217,119,6,0.45); }
25% { opacity: 1; }
100% { transform: scale(2.8); opacity: 0; border-color: rgba(217,119,6,0); }
}
/* The wordmark itself */
.cta-logo-mark {
position: relative;
z-index: 3;
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(48px, 6vw, 96px);
line-height: 1;
color: var(--text-on-dark);
letter-spacing: -0.035em;
text-shadow: 0 4px 32px rgba(217,119,6,0.4);
}
.cta-logo-mark .ember-i {
color: var(--ember);
font-style: italic;
display: inline-block;
animation: cta-logo-i-glow 3s ease-in-out infinite;
}
@keyframes cta-logo-i-glow {
0%, 100% { text-shadow: 0 0 20px rgba(217,119,6,0.5); }
50% { text-shadow: 0 0 40px rgba(245,158,11,0.9), 0 0 80px rgba(217,119,6,0.5); }
}
/* Tagline beneath wordmark */
.cta-logo-tagline {
position: absolute;
bottom: 32px;
left: 0;
right: 0;
text-align: center;
z-index: 3;
font-family: 'Manrope', sans-serif;
font-size: 10.5px;
letter-spacing: 0.22em;
color: rgba(217,119,6,0.7);
font-weight: 600;
}
@media (max-width: 1024px) {
.cta-logo-card { max-width: 460px; margin: 0 auto; }
}
/* ============ Product icons stack (3-product showcase) ============ */
.product-icons-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.product-icon-card {
display: flex;
align-items: center;
gap: 28px;
padding: 28px 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
transition: all 400ms var(--ease);
position: relative;
overflow: hidden;
}
.product-icon-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 0% 50%, var(--accent, transparent) 0%, transparent 60%);
opacity: 0.07;
pointer-events: none;
transition: opacity 400ms var(--ease);
}
.product-icon-card[data-color="orange"] { --accent: #FF6B1A; }
.product-icon-card[data-color="blue"] { --accent: #2D7DFF; }
.product-icon-card[data-color="green"] { --accent: #1FCB6E; }
.product-icon-card:hover {
border-color: var(--accent);
transform: translateX(4px);
box-shadow: 0 16px 32px -16px rgba(12,12,14,0.12), 0 0 0 1px var(--accent);
}
.product-icon-card:hover::before {
opacity: 0.15;
}
.product-icon-art {
flex-shrink: 0;
width: 110px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.product-icon-svg {
width: 100%;
height: 100%;
transition: transform 600ms var(--ease);
}
.product-icon-card:hover .product-icon-svg {
transform: scale(1.04);
}
.product-icon-meta {
flex: 1;
min-width: 0;
}
.product-icon-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
}
.product-icon-name {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(28px, 3vw, 38px);
line-height: 1;
margin-top: 4px;
color: var(--text);
letter-spacing: -0.02em;
}
.product-icon-tag {
margin-top: 10px;
color: var(--text-2);
font-size: 15px;
line-height: 1.4;
}
@media (max-width: 767px) {
.product-icon-card { padding: 20px 22px; gap: 18px; }
.product-icon-art { width: 80px; height: 80px; }
}
/* ============ OUR PRODUCTS — Yubi-style expandable 3-column layout ============ */
.yps-wrap {
position: relative;
}
.yps-grid {
display: grid;
/* Default: middle (Strata) is active. JS will override via inline grid-template-columns. */
grid-template-columns: 1fr 3.4fr 1fr;
gap: 0;
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
background: var(--surface);
transition: grid-template-columns 700ms var(--ease);
min-height: 580px;
}
.yps-card {
position: relative;
padding: 56px 44px 44px;
cursor: pointer;
overflow: hidden;
transition: background 600ms var(--ease);
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
}
.yps-card:last-child { border-right: none; }
/* Per-card pastel washes (warm tints that match Finhive ivory palette + accent glow) */
.yps-card[data-color="orange"] {
--accent: #FF6B1A;
--accent-soft: #FFB97F;
--wash-from: #FFE9D4;
--wash-to: #FFF6EC;
}
.yps-card[data-color="blue"] {
--accent: #2D7DFF;
--accent-soft: #7CADFF;
--wash-from: #FDE8D0; /* slight amber for cohesion w/ FH palette */
--wash-to: #FFF1DA;
}
.yps-card[data-color="green"] {
--accent: #1FCB6E;
--accent-soft: #6EE0A6;
--wash-from: #FFE2C9;
--wash-to: #FFEED7;
}
.yps-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--wash-from) 0%, var(--wash-to) 100%);
opacity: 0;
transition: opacity 700ms var(--ease);
pointer-events: none;
z-index: 0;
}
.yps-card.is-active::before { opacity: 1; }
.yps-card:not(.is-active)::before { opacity: 0.32; }
.yps-card > * { position: relative; z-index: 1; }
/* Number eyebrow */
.yps-num {
font-family: 'Manrope', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--text-3);
letter-spacing: 0.04em;
margin-bottom: 28px;
transition: color 500ms var(--ease);
}
.yps-card.is-active .yps-num { color: var(--text-2); }
/* Title — large display in active state, faded ghost in inactive */
.yps-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
line-height: 1;
letter-spacing: -0.025em;
color: var(--text);
margin: 0;
transition: color 600ms var(--ease), font-size 600ms var(--ease);
}
.yps-card.is-active .yps-title {
font-size: clamp(36px, 4.2vw, 56px);
}
.yps-card:not(.is-active) .yps-title {
font-size: clamp(28px, 2.6vw, 38px);
color: var(--text-3);
opacity: 0.55;
}
/* Tagline (only visible in active card) */
.yps-tagline {
margin-top: 22px;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.25;
color: var(--accent);
letter-spacing: -0.01em;
opacity: 0;
transform: translateY(8px);
transition: opacity 600ms var(--ease) 200ms, transform 600ms var(--ease) 200ms;
pointer-events: none;
}
.yps-card.is-active .yps-tagline {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Description (only visible in active card) */
.yps-desc {
margin-top: 18px;
font-family: 'Manrope', sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text-2);
max-width: 480px;
opacity: 0;
transform: translateY(8px);
transition: opacity 600ms var(--ease) 280ms, transform 600ms var(--ease) 280ms;
pointer-events: none;
}
.yps-card.is-active .yps-desc {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* CTA — solid pill in active, ghost outline in inactive */
.yps-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 32px;
padding: 14px 26px;
border-radius: 999px;
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: all 360ms var(--ease);
align-self: flex-start;
border: 1.5px solid var(--text);
background: var(--text);
color: #FFFFFF;
}
.yps-card.is-active .yps-cta {
background: var(--text);
color: #FFFFFF;
border-color: var(--text);
}
.yps-card.is-active .yps-cta:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-1px);
gap: 14px;
}
.yps-card:not(.is-active) .yps-cta {
background: transparent;
color: var(--text-3);
border-color: rgba(12,12,14,0.18);
opacity: 0.7;
}
.yps-cta-arrow {
width: 14px;
height: 14px;
transition: transform 320ms var(--ease);
}
/* Visual area: only animates inside active card */
.yps-visual {
position: relative;
margin-top: auto;
padding-top: 24px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
opacity: 0;
transform: scale(0.92);
transition: opacity 700ms var(--ease) 220ms, transform 800ms var(--ease) 220ms;
pointer-events: none;
}
.yps-card.is-active .yps-visual {
opacity: 1;
transform: scale(1);
}
.yps-visual svg {
width: 100%;
max-width: 480px;
height: auto;
max-height: 360px;
}
/* Inactive cards: hide tagline/desc/visual to keep them slim */
.yps-card:not(.is-active) .yps-tagline,
.yps-card:not(.is-active) .yps-desc,
.yps-card:not(.is-active) .yps-visual {
display: none;
}
/* Hover state for inactive cards: subtle lift on title color */
.yps-card:not(.is-active):hover .yps-title { color: var(--text-2); opacity: 0.85; }
.yps-card:not(.is-active):hover .yps-cta { color: var(--text-2); border-color: var(--text-2); opacity: 1; }
/* Auto-rotate progress indicator (subtle bottom hairline on active card) */
.yps-card.is-active::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
transform-origin: left;
transform: scaleX(0);
animation: yps-progress var(--yps-duration, 6s) linear forwards;
z-index: 2;
}
@keyframes yps-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.yps-grid.is-paused .yps-card.is-active::after { animation-play-state: paused; }
/* ---------- Mobile: stack vertically, only active card expanded ---------- */
@media (max-width: 900px) {
.yps-grid {
grid-template-columns: 1fr !important;
min-height: 0;
}
.yps-card {
border-right: none;
border-bottom: 1px solid var(--border);
padding: 36px 24px 28px;
}
.yps-card:last-child { border-bottom: none; }
.yps-card.is-active { padding: 40px 24px 36px; }
.yps-card.is-active .yps-title { font-size: clamp(32px, 8vw, 44px); }
.yps-card:not(.is-active) .yps-title { font-size: clamp(22px, 6vw, 28px); }
.yps-visual { min-height: 220px; }
.yps-visual svg { max-height: 260px; }
}
/* ============ Originate filter mock (mandate-fit) ============ */
.filter-chip-orange {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
font-family: 'Manrope', sans-serif;
font-size: 10px;
font-weight: 600;
color: #FF6B1A;
background: rgba(255, 107, 26, 0.08);
border: 1px solid rgba(255, 107, 26, 0.28);
letter-spacing: 0.02em;
white-space: nowrap;
}
.orig-row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
padding: 9px 12px;
border-radius: 6px;
font-size: 12px;
transition: opacity 600ms var(--ease), background 400ms var(--ease), border-color 400ms var(--ease);
border: 1px solid transparent;
}
.orig-row.orig-faded {
opacity: 0.32;
color: var(--text-3);
}
.orig-row.orig-faded > div { color: var(--text-3); }
.orig-row.orig-match {
background: rgba(255, 107, 26, 0.06);
border-color: rgba(255, 107, 26, 0.22);
}
.orig-result-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-radius: 8px;
background: rgba(255, 107, 26, 0.08);
border: 1px solid rgba(255, 107, 26, 0.28);
}
/* ============ Strata laptop frame + scorecard preview ============ */
.laptop-frame {
position: relative;
width: 100%;
max-width: 460px;
margin: 0 auto;
}
.laptop-screen {
position: relative;
background: linear-gradient(135deg, #0F1B33 0%, #0A1325 100%);
border: 8px solid #1A1A1F;
border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 14px;
overflow: hidden;
aspect-ratio: 16 / 10;
box-shadow: 0 20px 40px -16px rgba(12, 12, 14, 0.4);
}
.laptop-screen::after {
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(0.6px);
background: radial-gradient(ellipse at top, transparent 30%, rgba(15, 27, 51, 0.4) 100%);
pointer-events: none;
}
.laptop-base {
width: 110%;
height: 8px;
margin: 0 -5%;
background: linear-gradient(180deg, #1A1A1F 0%, #2C2C32 100%);
border-radius: 0 0 14px 14px;
box-shadow: 0 6px 12px -4px rgba(12, 12, 14, 0.3);
}
.laptop-base::before {
content: '';
display: block;
width: 80px;
height: 4px;
margin: 2px auto 0;
background: #0A0A0E;
border-radius: 0 0 4px 4px;
}
.strata-preview {
position: relative;
z-index: 1;
color: #FAFCFF;
height: 100%;
display: flex;
flex-direction: column;
gap: 6px;
filter: blur(0.4px);
}
.strata-preview-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 6px;
border-bottom: 1px solid rgba(45, 125, 255, 0.3);
}
.strata-badge {
width: 22px;
height: 22px;
background: linear-gradient(135deg, #4188E0, #2D7DFF);
color: #FFFFFF;
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.strata-rows {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
}
.strata-row {
display: grid;
grid-template-columns: 30px 1fr 36px;
gap: 6px;
align-items: center;
padding: 1.5px 0;
font-size: 8px;
}
.strata-pill {
color: #FFFFFF;
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 8px;
text-align: center;
padding: 1.5px 0;
border-radius: 2px;
letter-spacing: 0.02em;
}
.strata-desc {
color: #B5D5FF;
font-size: 8px;
}
.strata-row[data-grade="4"] .strata-desc,
.strata-row[data-grade="5"] .strata-desc { color: #FFB155; }
.strata-row[data-grade="6"] .strata-desc,
.strata-row[data-grade="7"] .strata-desc { color: #FF7474; }
.strata-band {
color: #FFFFFF;
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 8px;
text-align: right;
}
.strata-scoreband {
display: flex;
height: 6px;
margin-top: 4px;
border-radius: 2px;
overflow: hidden;
}
.strata-scoreband > span { flex: 1; }
/* ============ Strata 4-block "We are your..." cards ============ */
.strata-roles-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 16px;
}
@media (min-width: 768px) {
.strata-roles-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
.strata-role-card {
padding: 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
transition: all 300ms var(--ease);
display: flex;
flex-direction: column;
gap: 10px;
}
.strata-role-card:hover {
border-color: #2D7DFF;
transform: translateY(-2px);
box-shadow: 0 12px 28px -16px rgba(45, 125, 255, 0.25);
}
.strata-role-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
color: #2D7DFF;
text-transform: uppercase;
}
.strata-role-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 22px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text);
margin: 0;
}
.strata-role-q {
color: var(--text);
font-weight: 600;
font-size: 14px;
line-height: 1.4;
margin: 0;
}
.strata-role-sub {
color: var(--text-2);
font-size: 13px;
line-height: 1.45;
margin: 0;
}
.strata-role-flow {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 0;
margin: 4px 0;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
}
.strata-role-node {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
}
.strata-role-node-blue {
background: rgba(45, 125, 255, 0.08);
border-color: rgba(45, 125, 255, 0.3);
color: #2D7DFF;
}
.strata-role-node-green {
background: rgba(31, 203, 110, 0.08);
border-color: rgba(31, 203, 110, 0.3);
color: #1FCB6E;
}
.strata-role-arrow {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.strata-role-outcome {
color: var(--text);
font-size: 13px;
font-weight: 500;
line-height: 1.45;
font-style: italic;
margin: 0;
}
/* ============ Finhive Eye Triple Checks rebuild ============ */
.triple-checks-flow {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding-left: 56px;
}
.triple-checks-flow::before {
content: '';
position: absolute;
left: 19px;
top: 22px;
bottom: 22px;
width: 1.5px;
background: linear-gradient(180deg, #FF6B1A 0%, #2D7DFF 50%, #1FCB6E 100%);
opacity: 0.35;
}
.tc-step {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
transition: all 300ms var(--ease);
}
.tc-step:hover {
transform: translateX(2px);
box-shadow: 0 8px 20px -12px rgba(12, 12, 14, 0.15);
}
.tc-step-num-icon {
position: absolute;
left: -56px;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1.5px solid var(--accent);
border-radius: 8px;
color: var(--accent);
}
.tc-step-num-icon svg { width: 20px; height: 20px; }
.tc-step-connector {
position: absolute;
left: -18px;
top: 50%;
width: 16px;
height: 1.5px;
background: var(--text-3);
opacity: 0.45;
}
.tc-step-connector::after {
content: '';
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
border-left: 5px solid var(--text-3);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
opacity: 0.7;
}
.tc-step[data-color="orange"] { --accent: #FF6B1A; }
.tc-step[data-color="blue"] { --accent: #2D7DFF; }
.tc-step[data-color="green"] { --accent: #1FCB6E; }
.tc-step-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.2;
color: var(--text);
margin-bottom: 4px;
}
.tc-step-title .tc-num { color: var(--accent); margin-right: 4px; }
.tc-step-body {
color: var(--text-2);
font-size: 13px;
line-height: 1.5;
margin: 0;
}
.tc-step-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(var(--accent-rgb, 255, 107, 26), 0.1);
border: 1.5px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.tc-step[data-color="orange"] .tc-step-icon { background: rgba(255, 107, 26, 0.08); }
.tc-step[data-color="blue"] .tc-step-icon { background: rgba(45, 125, 255, 0.08); }
.tc-step[data-color="green"] .tc-step-icon { background: rgba(31, 203, 110, 0.08); }
.tc-step-icon svg { width: 18px; height: 18px; }
.tc-pool-callout {
margin-left: 42px;
padding: 14px 16px;
border: 1px dashed rgba(45, 125, 255, 0.45);
border-radius: 10px;
position: relative;
}
.tc-pool-callout::before {
content: '';
position: absolute;
left: -28px;
top: 24px;
width: 26px;
height: 1.5px;
background: rgba(45, 125, 255, 0.45);
border-top: 1.5px dashed rgba(45, 125, 255, 0.45);
background: transparent;
}
.tc-pool-label {
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: 12px;
color: #2D7DFF;
margin-bottom: 8px;
}
.tc-pool-body {
display: flex;
align-items: center;
gap: 12px;
}
.tc-pool-eye {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(31, 203, 110, 0.1);
border: 1.5px solid #1FCB6E;
display: flex;
align-items: center;
justify-content: center;
color: #1FCB6E;
flex-shrink: 0;
}
.tc-pool-text-strong {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--text);
}
.tc-pool-text-sub {
font-size: 12px;
color: var(--text-2);
margin-top: 2px;
line-height: 1.4;
}
.tc-footer {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: rgba(31, 203, 110, 0.06);
border: 1px solid rgba(31, 203, 110, 0.25);
border-radius: 12px;
margin-top: 16px;
}
.tc-footer-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(31, 203, 110, 0.12);
border: 1.5px solid #1FCB6E;
display: flex;
align-items: center;
justify-content: center;
color: #1FCB6E;
flex-shrink: 0;
}
.tc-footer-strong {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 15px;
color: #1FCB6E;
}
.tc-footer-sub {
color: var(--text);
font-size: 14px;
margin-left: 4px;
}
/* ========== ROTOR — the signature spinning element ========== */
.rotor {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 560px;
margin: 0 auto;
}
.rotor svg { width: 100%; height: 100%; }
/* Outer tick ring rotates slowly */
.rotor-ticks {
transform-origin: center;
animation: rotate-cw 60s linear infinite;
}
@keyframes rotate-cw {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Inner ring rotates the opposite way for kinetic balance */
.rotor-inner {
transform-origin: center;
animation: rotate-ccw 90s linear infinite;
}
@keyframes rotate-ccw {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* Pulsing center logo */
.rotor-core {
transform-origin: center;
animation: rotor-pulse 4s ease-in-out infinite;
}
@keyframes rotor-pulse {
0%, 100% { transform: scale(1); opacity: 0.95; }
50% { transform: scale(1.04); opacity: 1; }
}
/* Orbiting dots */
.orbit-dot {
transform-origin: 50% 50%;
}
.orbit-dot.o1 { animation: orbit-1 18s linear infinite; }
.orbit-dot.o2 { animation: orbit-2 24s linear infinite; }
.orbit-dot.o3 { animation: orbit-3 30s linear infinite; }
@keyframes orbit-1 {
from { transform: rotate(0deg) translateX(var(--r, 200px)) rotate(0deg); }
to { transform: rotate(360deg) translateX(var(--r, 200px)) rotate(-360deg); }
}
@keyframes orbit-2 {
from { transform: rotate(120deg) translateX(var(--r, 200px)) rotate(-120deg); }
to { transform: rotate(480deg) translateX(var(--r, 200px)) rotate(-480deg); }
}
@keyframes orbit-3 {
from { transform: rotate(240deg) translateX(var(--r, 200px)) rotate(-240deg); }
to { transform: rotate(600deg) translateX(var(--r, 200px)) rotate(-600deg); }
}
/* Feature pills around rotor */
.feature-pill {
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 12px 24px -10px rgba(12, 12, 14, 0.08);
white-space: nowrap;
animation: pill-float 6s ease-in-out infinite;
}
.feature-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
@keyframes pill-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.pill-1 { top: 8%; left: -6%; animation-delay: 0s; }
.pill-2 { top: 18%; right: -8%; animation-delay: 1.2s; }
.pill-3 { bottom: 22%; left: -10%; animation-delay: 2.4s; }
.pill-4 { bottom: 6%; right: -4%; animation-delay: 3.6s; }
@media (max-width: 1024px) {
.pill-1, .pill-2, .pill-3, .pill-4 { display: none; }
}
/* Animated rows in mocks — subtle glow sweep on the highlighted row */
@keyframes row-glow {
0%, 100% { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.18); }
50% { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.45), 0 0 18px -2px rgba(245,158,11,0.35); }
}
.row-live {
animation: row-glow 3s ease-in-out infinite;
}
/* Ticker number flicker */
.num-tick {
display: inline-block;
animation: num-flicker 4s ease-in-out infinite;
}
@keyframes num-flicker {
0%, 92%, 100% { opacity: 1; }
93%, 95% { opacity: 0.4; }
94% { opacity: 1; }
}
/* Marquee: alert tape rolling */
.alert-row {
transition: transform 600ms var(--ease), background 600ms var(--ease);
}
.alert-row.fresh {
animation: alert-pop 800ms var(--ease);
}
@keyframes alert-pop {
0% { transform: translateX(-8px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/* Bar fill animate-on-view */
.bar-track .bar-fill {
width: 0 !important;
transition: width 1400ms var(--ease);
}
.bar-track.in-view .bar-fill {
width: var(--w) !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* Selection */
::selection { background: var(--ember); color: #FFFFFF; }
/* Focus */
:focus-visible {
outline: 2px solid var(--ember);
outline-offset: 4px;
border-radius: 4px;
}
/* Hide scrollbars on horizontal scroll on mobile */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* ---------- block end ---------- */
/* ---------- block start ---------- */
/* ============ NEW PRODUCTS SECTION (fhprod-*) ============ */
#our-products.fhprod-section {
padding-top: 0;
padding-bottom: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: clamp(56px, 7vh, 96px) clamp(20px, 4vw, 64px);
box-sizing: border-box;
}
#our-products.fhprod-section > .fhprod-inner {
max-width: 1400px;
width: 100%;
margin: 0 auto;
flex: 1;
display: flex;
flex-direction: column;
gap: clamp(20px, 3vh, 40px);
}
#our-products .fhprod-header {
flex: 0 0 auto;
}
.fhprod-topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
flex: 0 0 auto;
gap: 16px;
}
.fhprod-eyebrow {
font-size: 11px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(17,24,39,0.42);
font-family: 'Manrope', sans-serif;
}
.fhprod-topnote {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 600;
color: #000;
letter-spacing: -0.02em;
font-family: 'Manrope', sans-serif;
text-align: right;
}
@media (max-width: 640px) {
.fhprod-topnote { display: none; }
}
.fhprod-shell {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
border: 1px solid rgba(7,17,31,0.14);
border-radius: 28px;
background: rgba(255,255,255,0.30);
box-shadow: 0 30px 80px rgba(7,17,31,0.10);
position: relative;
isolation: isolate;
}
.fhprod-shell::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.026'/%3E%3C/svg%3E");
opacity: .7;
pointer-events: none;
z-index: 1;
}
.fhprod-panel {
--fhp-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
overflow: hidden;
cursor: pointer;
transition: flex 1.05s var(--fhp-ease), background 0.8s ease;
border-right: 1px solid rgba(7,17,31,0.10);
background: rgba(255,255,255,0.22);
z-index: 2;
min-width: 0;
}
.fhprod-panel:last-child { border-right: 0; }
.fhprod-panel.fhprod-active { flex: 3.45; }
.fhprod-panel.fhprod-inactive { flex: 1; }
.fhprod-panel.fhprod-active.fhp-0 {
background:
radial-gradient(circle at 78% 78%, rgba(240,95,62,0.28), transparent 34%),
linear-gradient(135deg, #ffd9c5 0%, #fff1de 45%, #faf2dc 100%);
}
.fhprod-panel.fhprod-active.fhp-1 {
background:
radial-gradient(circle at 78% 78%, rgba(72,111,174,0.26), transparent 34%),
linear-gradient(135deg, #dfe8ff 0%, #f1f4ff 45%, #eef0e3 100%);
}
.fhprod-panel.fhprod-active.fhp-2 {
background:
radial-gradient(circle at 78% 78%, rgba(47,143,104,0.28), transparent 34%),
linear-gradient(135deg, #d8f0dd 0%, #eff8ea 45%, #f4f0df 100%);
}
.fhprod-panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.30), transparent 55%);
opacity: .55;
pointer-events: none;
}
.fhprod-panel.fhprod-active::before { opacity: .75; }
.fhp-0 { --fhp-accent: #f05f3e; }
.fhp-1 { --fhp-accent: #486fae; }
.fhp-2 { --fhp-accent: #2f8f68; }
.fhprod-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: rgba(17,24,39,0.06);
z-index: 10;
}
.fhprod-fill {
height: 100%;
width: 0%;
background: var(--fhp-accent);
opacity: .72;
}
.fhprod-copy {
position: absolute;
top: clamp(28px, 4vh, 54px);
left: clamp(28px, 3.5vw, 52px);
right: 32px;
max-width: 56%;
z-index: 5;
}
.fhprod-index {
display: block;
font-size: 12px;
color: rgba(17,24,39,0.42);
margin-bottom: 18px;
font-weight: 500;
letter-spacing: -0.02em;
font-family: 'Manrope', sans-serif;
}
.fhprod-title {
font-family: 'Manrope', sans-serif;
font-size: clamp(38px, 4.6vw, 68px);
line-height: .95;
letter-spacing: -0.04em;
font-weight: 600;
color: var(--text, #0C0C0E);
transition: font-size 1.05s var(--fhp-ease), color 0.55s ease, letter-spacing 0.55s ease;
max-width: 640px;
margin: 0;
}
.fhprod-panel.fhprod-inactive .fhprod-title {
font-size: clamp(24px, 2.4vw, 40px);
color: rgba(7,17,31,0.36);
letter-spacing: -0.035em;
max-width: 240px;
}
.fhprod-tag {
margin-top: 22px;
color: var(--fhp-accent);
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.35;
letter-spacing: -0.025em;
font-weight: 600;
transition: opacity 0.55s ease, transform 0.55s ease;
font-family: 'Manrope', sans-serif;
}
.fhprod-desc {
margin-top: 18px;
max-width: 380px;
color: var(--text-2, #52525B);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.65;
letter-spacing: -0.015em;
transition: opacity 0.7s ease, transform 0.7s ease, max-height 0.75s ease;
font-family: 'Manrope', sans-serif;
}
.fhprod-cta {
margin-top: 28px;
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(17,24,39,0.22);
border-radius: 999px;
padding: 12px 22px;
background: rgba(255,255,255,0.34);
color: #030a12;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.015em;
backdrop-filter: blur(10px);
transition: background 0.25s ease, border-color 0.25s ease, opacity 0.55s ease, transform 0.55s ease;
text-decoration: none;
cursor: pointer;
font-family: 'Manrope', sans-serif;
}
.fhprod-cta:hover {
background: rgba(255,255,255,0.60);
border-color: rgba(17,24,39,0.38);
}
.fhprod-panel.fhprod-inactive .fhprod-tag,
.fhprod-panel.fhprod-inactive .fhprod-desc,
.fhprod-panel.fhprod-inactive .fhprod-cta {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
max-height: 0;
overflow: hidden;
margin-top: 0;
}
.fhprod-icon-wrap {
position: absolute;
right: clamp(24px, 5vw, 80px);
bottom: clamp(28px, 5vh, 72px);
width: clamp(220px, 22vw, 320px);
height: clamp(220px, 22vw, 320px);
z-index: 4;
opacity: 1;
transition: transform 1.2s var(--fhp-ease), opacity 0.8s ease;
}
.fhprod-panel.fhprod-inactive .fhprod-icon-wrap {
opacity: 0;
transform: translate(22px, 26px) scale(.94);
}
.fhprod-icon-glow {
position: absolute;
inset: 58px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--fhp-accent) 36%, transparent), transparent 70%);
filter: blur(10px);
opacity: .55;
}
.fhprod-icon-wrap > svg {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
@keyframes fhprodSlowspin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.fhprod-spin-group {
transform-origin: 200px 202px;
animation: fhprodSlowspin 18s linear infinite;
}
@media (max-width: 900px) {
#our-products.fhprod-section {
min-height: auto;
padding: 60px 16px;
}
.fhprod-shell {
flex-direction: column;
min-height: auto;
}
.fhprod-panel,
.fhprod-panel.fhprod-active,
.fhprod-panel.fhprod-inactive {
flex: none;
min-height: 480px;
border-right: 0;
border-bottom: 1px solid rgba(17,24,39,0.08);
}
.fhprod-panel.fhprod-inactive { min-height: 160px; }
.fhprod-copy { top: 28px; left: 24px; right: 24px; max-width: none; }
.fhprod-icon-wrap { width: 220px; height: 220px; right: 18px; bottom: 24px; }
}
/* ============ Standard section spacing overrides ============ */
/* Reduce Tailwind py-32 (128px) and py-40 (160px) to professional standard */
.py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-40 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.pt-32 { padding-top: 4rem !important; }
/* Hero section — extra breathing room below nav */
section.relative.min-h-screen.pt-32 { padding-top: 10rem !important; }
.pb-24 { padding-bottom: 3rem !important; }
.mb-16 { margin-bottom: 2.5rem !important; }
/* ---------- block end ---------- */
/* ============================================================
Shared site logo + primary navigation links
(used by the #nav header on every page)
============================================================ */
/* Sized off the wordmark's cap height, not the plate: this single-line
lockup carries far more of its box as letterform than the old stacked
one did, so 44px would have read almost twice as large in the bar. */
.site-logo-img {
height: 34px;
width: auto;
display: block;
}
@media (max-width: 640px) {
.site-logo-img { height: 26px; }
}
/* On the dark product-page nav (before scroll) lift the gold logo so it
reads clearly against the dark bar, not just after the nav turns light. */
#nav.nav--dark:not(.nav-scrolled) .site-logo-img {
filter: brightness(1.12) saturate(1.05) drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
#nav .nav-link {
color: var(--text-2);
font-size: 14px;
font-weight: 500;
padding: 8px 14px;
white-space: nowrap;
transition: color .2s ease;
}
#nav .nav-link:hover { color: var(--ember); }
#nav .nav-link.is-active { color: var(--ember); font-weight: 700; }
/* NOTE: the product pages that sit on a dark hero define their own
`#nav:not(.nav-scrolled) a { color:#fff }` rule inline, which whitens
these links over the dark glass bar until the page is scrolled. Pages
with a light hero (e.g. the home page) have no such override, so the
graphite `.nav-link` colour above applies and stays legible. */
/* ---- Bar layout: primary links centred, auth actions pinned right ----
The link group is lifted out of flow and centred on the bar itself, so it
stays optically centred no matter how wide the logo or the auth pair grow.
The bar keeps `justify-between`, which now sits the logo left and the
Log in / Sign up pair right. */
#nav .nav-bar { position: relative; }
#nav .nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#nav .nav-actions { gap: 8px; }
#nav .nav-auth-link {
font-size: 14px;
font-weight: 600;
padding: 8px 14px;
white-space: nowrap;
transition: color .2s ease;
}
/* colour matches .nav-link, and the dark product pages' own
`#nav:not(.nav-scrolled) a` rule whitens it over a dark bar, as it does
for every other link up there. */
#nav .nav-auth-link { color: var(--text-2); }
#nav .nav-auth-link:hover { color: var(--ember); }
/* Specificity note: the two-class selector clears the dark pages' inline
`#nav:not(.nav-scrolled) a` colour, which would otherwise mute the pill's
white label to 72% alpha. */
#nav .nav-actions .nav-auth-cta {
display: inline-flex;
align-items: center;
background: var(--text);
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
padding: 9px 20px;
border-radius: 999px;
border: 1px solid var(--text);
white-space: nowrap;
transition: all 300ms var(--ease);
}
#nav .nav-actions .nav-auth-cta:hover {
background: var(--ember);
border-color: var(--ember);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 10px 26px -12px rgba(217, 119, 6, 0.55);
}
/* An ink pill would disappear into the dark bar, so it fills ember there —
the same swap the product pages already make for .btn-ember. */
#nav.nav--dark:not(.nav-scrolled) .nav-actions .nav-auth-cta {
background: var(--ember);
border-color: var(--ember);
}
/* ---- Finhive Eye group: parent link + sub-product dropdown ---- */
#nav .nav-group { position: relative; }
#nav .nav-parent { display: inline-flex; align-items: center; gap: 5px; }
#nav .nav-caret { width: 13px; height: 13px; transition: transform .2s ease; }
#nav .nav-group:hover .nav-caret,
#nav .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
#nav .nav-dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 218px;
margin-top: 6px;
padding: 8px;
border-radius: 14px;
background: #fffdf9;
border: 1px solid var(--border);
box-shadow: 0 18px 44px rgba(40, 33, 20, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* invisible hover bridge so the menu doesn't close in the 6px gap */
#nav .nav-group::after {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 218px;
height: 12px;
}
#nav .nav-group:hover .nav-dropdown,
#nav .nav-group:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#nav .nav-drop-link {
display: block;
padding: 9px 12px;
border-radius: 9px;
font-size: 14px;
font-weight: 500;
color: var(--text-2);
white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
#nav .nav-drop-link:hover { background: rgba(217, 119, 6, 0.10); color: var(--ember); }
#nav .nav-drop-link.is-active { color: var(--ember); font-weight: 700; }
/* The dropdown is always a light card, so keep its links dark even while the
nav sits un-scrolled on a dark hero (where the inline rule whitens links). */
#nav:not(.nav-scrolled) .nav-drop-link { color: var(--text-2); }
#nav:not(.nav-scrolled) .nav-drop-link:hover,
#nav:not(.nav-scrolled) .nav-drop-link.is-active { color: var(--ember); }
/* ============================================================
Global responsive safety net — no page scrolls sideways.
`clip` (not `hidden`) so it never breaks position: sticky.
============================================================ */
html, body { overflow-x: clip; max-width: 100%; }
/* ============================================================
Mobile navigation (hamburger + dropdown drawer)
CSS-only toggle via #nav-toggle checkbox — works without JS.
============================================================ */
#nav .nav-burger { display: none; }
#nav .nav-mobile { display: none; }
@media (max-width: 1023px) {
/* hamburger button — colour follows the bar theme (white on dark hero,
dark on light/scrolled bars), matching the nav links */
#nav .nav-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 11px 9px;
cursor: pointer;
border-radius: 10px;
color: var(--text);
-webkit-tap-highlight-color: transparent;
}
#nav .nav-burger span {
display: block;
height: 2px;
width: 100%;
background: currentColor;
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
#nav.nav--dark:not(.nav-scrolled) .nav-burger { color: #fff; }
/* hamburger -> X when the menu is open */
#nav-toggle:checked ~ div .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle:checked ~ div .nav-burger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ div .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* the drawer — solid dark panel, readable over any hero */
#nav .nav-mobile {
position: absolute;
top: 72px;
left: 0;
right: 0;
flex-direction: column;
gap: 2px;
padding: 12px 22px 20px;
background: #0b0c0f;
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 26px 44px rgba(0, 0, 0, 0.4);
max-height: calc(100vh - 72px);
overflow-y: auto;
}
#nav-toggle:checked ~ .nav-mobile { display: flex; }
#nav .nav-mobile a { text-decoration: none; }
#nav .nav-m-link {
padding: 14px 6px;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#nav .nav-m-link:hover,
#nav .nav-m-link.is-active { color: var(--ember); }
#nav .nav-m-group { display: flex; flex-direction: column; }
#nav .nav-m-parent { border-bottom: none; padding-bottom: 8px; }
#nav .nav-m-sub {
padding: 11px 6px 11px 20px;
margin-left: 6px;
font-size: 14.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
border-left: 2px solid rgba(255, 255, 255, 0.14);
}
#nav .nav-m-sub:last-child { margin-bottom: 4px; }
#nav .nav-m-sub:hover,
#nav .nav-m-sub.is-active {
color: var(--ember);
border-left-color: var(--ember);
}
/* auth pair closes the drawer */
#nav .nav-m-auth {
display: flex;
align-items: center;
gap: 10px;
padding-top: 18px;
}
#nav .nav-m-auth a {
flex: 1 1 0;
text-align: center;
justify-content: center;
padding: 12px 10px;
font-size: 15px;
border-radius: 999px;
}
#nav .nav-m-auth .nav-m-login {
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.22);
}
#nav .nav-m-auth .nav-m-login:hover {
color: var(--ember);
border-color: var(--ember);
}
#nav .nav-m-auth .nav-m-signup {
font-weight: 700;
color: #FFFFFF;
background: var(--ember);
border: 1px solid var(--ember);
}
}
/* ============================================================
Footer
Four balanced columns that span the full 1400px canvas, so the
link groups reach the right edge instead of hugging the brand.
Written as plain CSS because styles.css is a pre-built Tailwind
bundle — arbitrary md:col-span-* utilities are not available.
============================================================ */
.footer-shell {
position: relative;
padding: 56px 0 32px;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
}
.footer-grid {
display: grid;
/* Two-up link groups even on phones, so the footer stays short */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px 24px;
margin-bottom: 36px;
}
.footer-brand-col { grid-column: 1 / -1; }
@media (min-width: 640px) {
.footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px 32px;
margin-bottom: 40px;
}
}
@media (min-width: 1000px) {
/* Brand on its own row, then six link columns */
.footer-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: 28px;
row-gap: 48px;
}
}
/* ---- Brand block ---- */
.footer-logo {
display: inline-block;
margin-bottom: 16px;
}
.footer-logo-img {
height: 42px;
width: auto;
display: block;
}
@media (max-width: 640px) {
.footer-logo-img { height: 36px; }
}
.footer-tagline {
font-size: 14px;
line-height: 1.6;
color: var(--text-3);
max-width: 280px;
}
.footer-social {
display: flex;
gap: 10px;
margin-top: 20px;
}
.footer-social a {
width: 34px;
height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
color: var(--text-2);
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s var(--ease);
}
.footer-social a:hover {
color: var(--ember);
border-color: var(--ember);
background: var(--ember-tint);
transform: translateY(-2px);
}
.footer-social svg { width: 15px; height: 15px; }
/* Between 640px and the four-column breakpoint the brand owns a full-width
row on its own, so lay it out horizontally rather than leaving the right
half of that row empty. */
@media (min-width: 640px) {
.footer-brand-col {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.footer-brand-col .footer-social { margin-top: 0; }
.footer-tagline { max-width: 340px; }
}
/* ---- Link columns ---- */
.footer-col-title {
display: block;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 18px;
}
a.footer-col-title {
width: -moz-fit-content;
width: fit-content;
transition: color .2s ease;
}
a.footer-col-title:hover { color: var(--ember); }
.footer-links {
display: flex;
flex-direction: column;
gap: 11px;
font-size: 13px;
list-style: none;
}
.footer-links a {
color: var(--text-2);
transition: color .2s ease;
}
.footer-links a:hover { color: var(--ember); }
.footer-links a[aria-current="page"] { color: var(--ember); }
/* ---- Baseline ---- */
.footer-beam {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ember) 50%, transparent 100%);
opacity: .35;
margin-bottom: 20px;
}
.footer-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--text-3);
}
@media (min-width: 768px) {
.footer-bottom { flex-direction: row; align-items: center; }
}
/* ============================================================
Lead capture modal
Markup is injected once by scripts.js, so every page that
loads the shared script gets the form. Open it from any
element carrying data-lead-form (or a link to #contact).
============================================================ */
.lf-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
overflow-y: auto;
background: rgba(12, 12, 14, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.lf-overlay.is-open { opacity: 1; visibility: visible; }
.lf-modal {
position: relative;
width: 100%;
max-width: 560px;
margin: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 40px 80px -24px rgba(12, 12, 14, 0.35);
padding: 36px clamp(22px, 4vw, 40px) 32px;
transform: translateY(16px) scale(.985);
transition: transform .28s var(--ease);
}
.lf-overlay.is-open .lf-modal { transform: translateY(0) scale(1); }
.lf-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid transparent;
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.lf-close:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.lf-close svg { width: 18px; height: 18px; }
.lf-title {
font-family: 'Manrope', sans-serif;
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text);
margin: 0 40px 8px 0;
}
.lf-sub {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-2);
margin: 0 0 24px;
}
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-field--full { grid-column: 1 / -1; }
.lf-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.lf-req { color: var(--ember); margin-left: 2px; }
.lf-input,
.lf-select,
.lf-textarea {
font-family: 'Manrope', sans-serif;
font-size: 15px;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
width: 100%;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.lf-textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.lf-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8B93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.lf-input::placeholder, .lf-textarea::placeholder { color: var(--text-3); }
.lf-input:focus, .lf-select:focus, .lf-textarea:focus {
outline: none;
background: var(--surface);
border-color: var(--ember);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14);
}
.lf-field.has-error .lf-input,
.lf-field.has-error .lf-select { border-color: #B91C1C; }
.lf-error { font-size: 12px; font-weight: 600; color: #B91C1C; min-height: 0; }
/* Honeypot — hidden from people, tempting to bots */
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-actions { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lf-submit {
font-family: 'Manrope', sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: var(--ember);
border: 0;
border-radius: 10px;
padding: 14px 28px;
cursor: pointer;
transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.lf-submit:hover:not(:disabled) { background: var(--ember-deep); transform: translateY(-1px); }
.lf-submit:disabled { opacity: .6; cursor: default; }
.lf-note { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.lf-spinner {
width: 15px; height: 15px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: #fff;
border-radius: 50%;
animation: lf-spin .7s linear infinite;
display: none;
}
.lf-submit.is-sending .lf-spinner { display: block; }
@keyframes lf-spin { to { transform: rotate(360deg); } }
/* Result states swap in for the form body */
.lf-result { display: none; text-align: center; padding: 18px 0 6px; }
.lf-result.is-shown { display: block; }
.lf-result-icon {
width: 56px; height: 56px; margin: 0 auto 18px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--ember-tint); color: var(--success);
}
.lf-result-icon svg { width: 26px; height: 26px; }
.lf-result h3 { font-size: 21px; font-weight: 800; color: var(--text); margin: 0 0 8px; letter-spacing: -0.01em; }
.lf-result p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
.lf-formwrap.is-hidden { display: none; }
.lf-fail {
display: none;
margin-top: 14px;
font-size: 13.5px;
font-weight: 600;
color: #B91C1C;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 9px;
padding: 10px 13px;
line-height: 1.5;
}
.lf-fail.is-shown { display: block; }
@media (max-width: 560px) {
.lf-grid { grid-template-columns: 1fr; }
.lf-modal { padding: 30px 20px 26px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.lf-overlay, .lf-modal { transition: none; }
.lf-spinner { animation-duration: 2s; }
}
/* ============================================================
Products mega menu — the single "Products" tab in the primary
nav opens a card listing every product with its icon and a
one-line description; Finhive Eye nests its three Vigil
sub-products underneath.
============================================================ */
/* The trigger is a