/* ============================================================
imaxis — shared design system
Parent brand: calm, premium, neutral. Products bring color.
Fonts are loaded per-page via + stylesheet
in each HTML (render-blocking @import removed for perf).
============================================================ */
:root {
/* surfaces */
--bg: #FFFFFF;
--bg-2: #F8FAFC;
--bg-3: #F6F8FA;
--ink: #0F172A;
--ink-soft: #1E293B;
--muted: #64748B;
--muted-2: #94A3B8;
--border: #E2E8F0;
--border-2: #EDF1F6;
/* dark surfaces (footer / investor) */
--navy: #0B1220;
--navy-2: #111B2E;
--navy-line: #1E293B;
/* product accents */
--hs-blue: #3B6FFF;
--hs-purple: #8B5CF6;
--hs-ai: #10B981;
--dk-orange: #F36A22;
--dk-violet: #6B5BD1;
--dk-navy: #11243B;
--eg-teal: #14B8A6;
--eg-emerald:#10B981;
--eg-navy: #11243B;
/* radii / shadow */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.07);
--shadow-lg: 0 18px 48px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
--shadow-glow: 0 24px 70px rgba(15,23,42,.14);
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--maxw: 1160px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.6;
}
h1,h2,h3,h4 { font-family: 'Manrope', system-ui, sans-serif; margin: 0; color: var(--ink); letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
/* width/height attrs (on all ![]()
) supply the aspect-ratio for CLS; width/height:auto
let whichever dimension the CSS fixes drive the other, so logos never distort.
Specific rules (e.g. .core img{width:100%}) still win via specificity. */
img { display: block; max-width: 100%; width: auto; height: auto; }
button { font-family: inherit; cursor: pointer; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: 'JetBrains Mono', monospace; }
/* eyebrow / kicker */
.kicker {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted);
}
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-weight: 600; font-size: 15px; letter-spacing: -.01em;
padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
white-space: nowrap; cursor: pointer; line-height: 1;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-soft { background: var(--bg-2); color: var(--ink); border-color: var(--border); }
.btn-soft:hover { background: #fff; border-color: var(--ink); }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 13px; }
.btn-block { width: 100%; }
/* section spacing */
.section { padding: 104px 0; }
.section-head { max-width: 680px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; margin-top: 16px; }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 18px; line-height: 1.6; }
/* generic card */
.card {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
/* product accent pill / badge */
.badge {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12.5px;
letter-spacing: .02em; padding: 6px 12px 6px 9px; border-radius: 999px;
color: #fff;
}
.badge .bd { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.85); }
/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }
.reveal[data-d="4"]{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* focus visibility */
:focus-visible { outline: 2px solid var(--hs-blue); outline-offset: 2px; border-radius: 6px; }
/* language switch */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex: none; }
.lang-btn { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--muted); background: transparent; border: 0; padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: background .18s, color .18s; line-height: 1; }
.lang-btn:hover { color: var(--ink); }
.lang-btn.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }