/* =========================================================
EQrento – landing page
Breakpoints: 1440 / 1200 (tablet landscape) / 900 / 640 (mobile)
========================================================= */
@font-face {
font-family: "Sora";
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Sora";
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* colours (Figma variables) */
--black: #010101;
--ink: #1c1a17;
--gray: #a39d95; /* Neutral/Gray light */
--gray-2: #4a4540; /* Neutral/Grey light 2 */
--soft: #f8f7f5; /* Neutral/Soft White */
--white: #fff;
--brand: #c47a00;
--violet: #ffd23f;
--navy: #ffa41b;
--lilac: #ffd23f;
--indigo: #ffbb2d;
--chip: #1a1611;
--gradient: linear-gradient(90deg, var(--violet), var(--navy));
--tint: rgba(255, 164, 27, .1);
--line: rgba(229, 225, 219, .5);
--shadow-brand: 0 24px 70px -15px rgba(255, 187, 45, .4);
--shadow-card: 0 1px 2px rgba(0, 0, 0, .05);
/* layout */
--gutter: 48px;
--wrap: min(1600px, 100% - 2 * var(--gutter));
--wrap-narrow: min(1360px, 100% - 2 * var(--gutter));
--header-h: 128px;
--section-y: 96px;
--sec-y: 76px; /* gap between a section's edge and its content (desktop); 50px from 1200px down */
--sec-join: 48px; /* where two neighbouring sections share the same background: 48 + 48 = 96px between them (32 + 32 = 64px from 1200px down) */
/* type */
--h1: clamp(34px, 3.34vw, 64px);
--h2: clamp(30px, 1.6vw + 17px, 48px);
--lead: 18px;
--ease: cubic-bezier(.2, .7, .2, 1);
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* off-screen reveal/parallax offsets must never widen the page on phones */
body {
margin: 0;
font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--gray-2);
background: var(--soft);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 8px; }
section[id] { scroll-margin-top: 80px; }
.skip-link {
position: fixed; left: 16px; top: -60px; z-index: 200;
background: var(--white); color: var(--black); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 16px; }
/* text for screen readers only (e.g. “Included” behind the ticks in the pricing table) */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* a line break for phones only (≤640px):
*/
@media (min-width: 641px) { .br-phone { display: none; } }
.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-narrow { width: var(--wrap-narrow); margin-inline: auto; }
/* ---------- type ---------- */
.h2 {
font-size: var(--h2);
font-weight: 600;
line-height: 1.25;
color: var(--ink);
letter-spacing: -.01em;
}
.lead {
font-size: var(--lead);
line-height: 1.55;
letter-spacing: -.01em;
color: var(--gray-2);
}
.section-head {
display: flex; flex-direction: column; align-items: center; gap: 16px;
text-align: center; max-width: 1008px; margin-inline: auto;
}
/* ---------- buttons ---------- */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 20px;
height: 64px; padding: 12px 40px;
border-radius: 32px; border: 1px solid rgba(255, 255, 255, .1);
font-size: 18px; font-weight: 600; line-height: 1.1; color: var(--white);
white-space: nowrap;
isolation: isolate; overflow: hidden;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--primary { background: var(--gradient); }
.btn--primary::before { /* hover sheen */
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(90deg, #ffdb65, #e69418);
opacity: 0; transition: opacity .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255, 210, 63, .6); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0); }
.btn--arrow { padding: 12px 7px 12px 40px; justify-content: space-between; min-width: 341px; }
.btn__icon {
flex: none; width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center; background: var(--white);
transition: transform .35s var(--ease);
}
.btn--arrow:hover .btn__icon { transform: translateX(4px); }
/* secondary action on light cards (pricing) */
.btn--ghost { color: var(--ink); background: var(--white); border-color: rgba(23, 15, 4, .16); }
.btn--ghost:hover { border-color: rgba(23, 15, 4, .4); box-shadow: 0 14px 32px -16px rgba(23, 15, 4, .3); }
/* ---------- pills ---------- */
.pill {
display: inline-flex; align-items: center; justify-content: center;
height: 48px; padding: 0 24px; border-radius: 32px;
font-size: 16px; line-height: 1.1; white-space: nowrap;
}
.pill--dark {
height: 56px; font-size: 18px; color: var(--white);
background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.pill--dark span { color: var(--lilac); margin-left: .3em; }
.pill--light {
font-weight: 600; color: var(--brand);
background: linear-gradient(90deg, rgba(255, 210, 63, .05), rgba(115, 74, 12, .05));
border: 1px solid rgba(196, 122, 0, .1);
}
.pill--glass {
color: var(--white);
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1);
height: 46px; font-size: 15px;
}
.icon-box {
flex: none; width: 48px; height: 48px; border-radius: 12px;
display: grid; place-items: center; background: var(--tint);
transition: background-color .4s var(--ease);
}
.icon-box img { max-width: 27px; max-height: 27px; transition: filter .4s var(--ease); }
/* ---------- decorative glows ---------- */
.glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); }
/* =========================================================
HEADER
========================================================= */
.header {
position: fixed; inset: 0 0 auto; z-index: 100;
height: var(--header-h);
transition: height .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), transform .8s var(--ease);
border-bottom: 1px solid transparent;
}
.header.is-scrolled {
--header-h: 84px;
background: rgba(8, 6, 18, .86);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border-color: rgba(255, 255, 255, .06);
}
.header__inner {
height: 100%;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.header__logo img { width: 246px; transition: width .4s var(--ease); }
.header.is-scrolled .header__logo img { width: 196px; }
.nav__list { display: flex; gap: 48px; }
.nav__link {
position: relative; display: block; padding: 8px 0;
font-size: 16px; line-height: 1.1; color: var(--white); opacity: .5;
transition: opacity .3s var(--ease);
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__link:hover, .nav__link.is-active { opacity: 1; }
.nav__link.is-active::after { transform: scaleX(1); }
.header__cta { justify-self: end; width: 202px; padding-inline: 40px; }
.header.is-scrolled .header__cta { height: 52px; }
.burger { display: none; }
.mobile-menu { display: none; }
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
height: clamp(760px, 100svh, 1080px);
background: var(--black);
overflow: hidden;
isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.glow--hero-a {
width: 1088px; height: 1088px; left: -682px; top: -683px;
background: radial-gradient(closest-side, rgba(255, 210, 63, .55), rgba(115, 74, 12, .25) 60%, transparent);
}
.glow--hero-b {
width: 1311px; height: 1311px; left: calc(50% + 49px); top: 252px;
background: radial-gradient(closest-side, rgba(235, 151, 25, .55), rgba(115, 74, 12, .3) 60%, transparent);
}
.hero__inner { height: 100%; display: flex; align-items: center; }
.hero__content {
position: relative; z-index: 2;
width: 606px; max-width: 100%;
display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
.hero__title {
font-size: var(--h1); font-weight: 400; line-height: 1.1; color: var(--white);
max-width: 540px;
}
.hero__lead { font-size: var(--lead); line-height: 1.5; color: var(--gray); }
/* headline: two short sentences, each kept on its own line (the
) – sized so the longer one fits */
.hero__title { font-size: clamp(34px, 2.95vw, 56px); max-width: none; white-space: nowrap; }
/* three short proof points under the lead */
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: -8px; }
.hero__chips li {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px 8px 12px; border-radius: 999px;
font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--white);
background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
/* short laptop screens (e.g. 1366×657): the hero is never lower than 760px and its content is centred in it, so on a lower
viewport the demo button sinks to the fold; tighter gaps pull it back up (the badge still clears the header logo) */
@media (min-width: 1201px) and (max-height: 700px) { .hero__content { gap: 20px; } }
.hero__chips li::before {
content: ""; flex: none; width: 16px; height: 16px; background: #eda532;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* visual stage – built on the Figma frame, scales with viewport */
.hero__stage {
--sw: min(68.5vw, 1315px);
position: absolute; z-index: 1;
right: 0; top: calc(50% - var(--sw) * .1787);
width: var(--sw); aspect-ratio: 1315 / 674;
pointer-events: none;
}
.hero__stage > div { position: absolute; }
.hero__screen { left: 23.8%; top: 0; width: 63.65%; z-index: 1; }
.hero__forklift{ left: 6.263%; top: 36.8%; width: 38.78%; z-index: 2; } /* its back edge sits as far left of the front (offer) window as the lift sits right of it */
.hero__lift { left: 67.497%; top: 36.212%; width: 26.229%; z-index: 3; } /* 12% smaller than it was (more of the AI window shows), wheels on the same line; image canvas extended on the right so the glow fades out */
/* the collage brings its own window shadows and glow. Its width is rounded to whole device pixels (--dpx = one device
pixel, set by main.js), so the browser shows the picture of that exact width 1:1 instead of resizing it (sharper) */
.hero__screen img { width: 100%; width: round(100%, var(--dpx, 1px)); max-width: none; } /* may be a fraction of a pixel wider than its box */
/* wide screens: the collage 10% larger (the machines keep their size), grown around the bottom middle of the offer
window; the machines move out with its edges, so both still stand 2.95% of the stage away from them. The picture
now reaches 3.9% of the stage higher, so the stage sits 1.95% lower to keep it centred beside the text */
@media (min-width: 1201px) {
.hero__stage { top: calc(50% - var(--sw) * .1592); }
.hero__screen { left: 20.663%; top: -8.036%; width: 70.02%; }
.hero__forklift { left: 4.839%; }
.hero__lift { left: 68.921%; }
}
/* =========================================================
LOGOS
========================================================= */
.logos { --logo-k: 1; --logo-gap: 32px; background: var(--soft); padding: var(--sec-join) 0; }
/* small, quiet label above the logos (outside .wrap-narrow, which the marquee masks at the edges) */
.logos__title {
width: var(--wrap-narrow); margin: 0 auto 28px;
text-align: center; font-size: 14px; font-weight: 600; line-height: 1.5;
letter-spacing: .08em; text-transform: uppercase; color: var(--gray-2);
}
.logos__list {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: 24px var(--logo-gap);
}
.logos__list li { flex: none; display: grid; place-items: center; }
/* optical balancing: every file is trimmed to its mark, and --lh (set per logo in the HTML)
is a height chosen so wide/flat and compact/heavy marks read as the same size
(height ∝ aspect^-0.5 × ink density^-0.25). --logo-k scales the whole row per breakpoint. */
.logos__list img {
height: calc(var(--lh) * var(--logo-k) * 1px); width: auto; max-width: none;
filter: var(--logo-gray, grayscale(1)) contrast(1.05) brightness(var(--tone, 1)); opacity: .85; /* --logo-gray: a different grey conversion for logos that need it (Tenge); --tone darkens a pale logo (eWheelz) */
transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
/* hover highlight and pause only where a real pointer can hover; on touch screens a tap
would leave :hover stuck (marquee paused) until the next tap somewhere else */
@media (hover: hover) {
.logos__list li:hover img { filter: none; opacity: 1; transform: scale(1.04); }
}
/* touch: a tapped logo is highlighted and the marquee pauses until the page scrolls (main.js) */
.logos__list li.is-touched img { filter: none; opacity: 1; transform: scale(1.04); }
/* marquee – switched on by JS when the logos don't fit in one row */
.logos.is-marquee .wrap-narrow {
width: 100%; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos.is-marquee .logos__list {
flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content;
animation: marquee var(--marquee-dur, 32s) linear infinite;
}
/* spacing as padding (not gap) so the duplicated half is exactly 50% wide and the loop is seamless */
.logos.is-marquee .logos__list li { padding: 0 calc(max(var(--logo-gap), 56px) / 2); }
@media (max-width: 640px) {
.logos.is-marquee .logos__list li { padding: 0 14px; } /* phones: 28px between logos instead of 56px, so more of them are in view at once */
}
@media (hover: hover) {
.logos.is-marquee:hover .logos__list { animation-play-state: paused; }
}
.logos.is-marquee.is-paused .logos__list { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
/* =========================================================
STEPS – pinned horizontal scroll
========================================================= */
.steps { position: relative; background: var(--soft); }
.steps__pin {
position: sticky; top: var(--pin-top, 84px);
display: flex; flex-direction: column;
padding: var(--sec-y) 0 var(--sec-join); /* top: follows the dark platform section */
overflow: hidden;
}
/* pin low enough that the cards AND the 01/06 progress bar fit on screen (short phone screens with
browser bars): the heading may slide up under the header, but the cards never do.
--pin-h / --pin-head are measured in main.js; svh = viewport with the browser bars shown */
@supports (height: 100svh) {
.steps__pin {
top: max(calc(var(--pin-top, 84px) - var(--pin-head, 0px)),
min(var(--pin-top, 84px), calc(100svh - var(--pin-h, 0px) - 12px)));
}
}
.steps__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.steps__viewport { margin-top: 32px; }
.steps__track {
--card-h: 272px;
--pad: max(var(--gutter), (100vw - 1360px) / 2);
display: flex; align-items: flex-start;
width: max-content;
padding: 20px var(--pad) 48px; /* bottom room: active card grows by 56px */
min-height: calc(var(--card-h, 272px) + 56px + 68px);
will-change: transform;
}
.step__arrow { flex: none; width: 24px; height: var(--card-h, 272px); display: grid; place-items: center; }
.step {
position: relative; flex: none;
width: 293px; height: var(--card-h); padding: 24px;
display: flex; flex-direction: column;
background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card);
overflow: hidden; isolation: isolate;
transition: height .6s var(--ease), background-color .5s var(--ease), box-shadow .6s var(--ease);
}
.step__media {
position: absolute; inset: 0 0 auto; height: 200px; z-index: -1;
opacity: 0; transform: scale(1.08);
transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__media::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 85px;
background: linear-gradient(to bottom, rgba(1, 1, 1, 0), #010101);
}
.step__num {
font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px;
color: var(--gray); opacity: .25;
transition: opacity .6s var(--ease), color .6s var(--ease);
}
/* the big pale number is decoration (the order is in the list and the “01 / 06” counter): it is drawn from data-num,
so it is neither read out (aria-hidden) nor counted as low-contrast text */
.step__num::before { content: attr(data-num); }
.step__foot { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.step__desc {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .6s var(--ease);
}
.step__desc > span {
overflow: hidden; min-height: 0;
font-size: 14px; line-height: 1.5; color: var(--gray);
opacity: 0; transition: opacity .4s var(--ease);
}
.step__glow {
position: absolute; z-index: -2; left: -114px; top: 132px; width: 255px; height: 256px; border-radius: 50%;
background: var(--gradient); filter: blur(61px); opacity: 0; transition: opacity .6s var(--ease);
}
.step__title {
font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: -.3px; color: var(--black);
transition: color .6s var(--ease);
}
/* active (scroll) + hover – Figma variant "Card 1 / Variant2" */
.step.is-active, .step:hover {
height: calc(var(--card-h) + 56px);
background: var(--black);
box-shadow: var(--shadow-brand);
}
.step.is-active .step__media, .step:hover .step__media { opacity: 1; transform: none; }
.step.is-active .step__num, .step:hover .step__num { opacity: 0; }
.step.is-active .step__title, .step:hover .step__title { color: var(--white); }
.step.is-active .icon-box, .step:hover .icon-box { background: rgba(255, 164, 27, .22); }
.step.is-active .step__desc, .step:hover .step__desc { grid-template-rows: 1fr; }
.nowrap { white-space: nowrap; } /* keeps hyphenated words like “on-site” on one line */
.step.is-active .step__desc > span, .step:hover .step__desc > span { opacity: 1; padding-top: 16px; transition-delay: .15s; }
.step.is-active .step__glow, .step:hover .step__glow { opacity: .45; }
.steps__progress {
display: flex; align-items: center; gap: 20px; margin-top: 24px;
font-size: 14px; color: var(--gray);
}
.steps__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.steps__count b { color: var(--brand); font-weight: 600; }
.steps__bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(149, 151, 182, .25); overflow: hidden; }
.steps__bar i {
position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
background: var(--gradient);
}
/* =========================================================
KEY FEATURES
========================================================= */
.features { position: relative; padding: var(--sec-join) 0; background: var(--soft); }
.features__title { text-align: center; color: var(--black); }
.features__grid {
margin-top: 64px;
display: grid; grid-template-columns: minmax(0, 452fr) minmax(0, 844fr); gap: 64px; align-items: center;
transition: padding-bottom .5s var(--ease); /* room for the picture next to the last tabs (main.js) */
}
.features__list { display: flex; flex-direction: column; gap: 16px; align-self: start; } /* stays at the top; the picture glides beside it */
/* main.js: an invisible copy of the list, measured in its end state (only the new tab open) */
.features__list.is-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.is-probe, .is-probe * { transition: none !important; }
/* stacked: the tabs that shift when the picture moves under another tab glide back into place (FLIP, main.js) */
.features__list.is-flip > .feat { transition: background-color .45s var(--ease), box-shadow .45s var(--ease), translate .3s var(--ease); }
.feat {
border-radius: 24px; background: transparent;
transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.feat.is-open { background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.feat__head {
width: 100%; display: flex; align-items: center; gap: 24px;
padding: 16px 32px; text-align: left;
transition: padding .45s var(--ease), gap .45s var(--ease);
}
.feat.is-open .feat__head { padding: 32px 32px 0; gap: 16px; cursor: default; }
.feat__name { flex: 1; font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--black); }
.plus-btn {
flex: none; width: 48px; height: 48px; border-radius: 52px;
display: grid; place-items: center;
border: 1px solid transparent;
transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .45s var(--ease), opacity .3s var(--ease);
}
.feat__head:hover .plus-btn,
.feat__head:focus-visible .plus-btn { border-color: #ffe695; background: rgba(255, 187, 45, .06); }
.feat__head:hover .icon-box { background: rgba(255, 164, 27, .16); }
.feat.is-open .plus-btn { opacity: 0; transform: rotate(45deg); }
.feat__body {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .5s var(--ease);
}
.feat__body > p {
overflow: hidden; min-height: 0;
padding: 0 32px; font-size: 16px; line-height: 1.5; color: var(--gray-2);
opacity: 0; transition: opacity .35s var(--ease), padding .5s var(--ease);
}
.feat.is-open .feat__body { grid-template-rows: 1fr; }
.feat.is-open .feat__body > p { opacity: 1; padding: 16px 32px 32px; transition-delay: .1s; }
.features__visual { position: relative; }
/* the picture glides to the opened tab's level with `translate`, moved frame by frame by main.js in step with the page
scroll and the accordion (its own layer meanwhile: no repaint of the shadow and glow per frame) */
/* ONE window frame for the product screenshots (Key features and the telematics map card; the screenshots are raw – no
frame, no glow baked in): a light window like the ones in the hero collage – light title bar (--bar) with red /
yellow / green dots, hairline edge – with the collage's shadow: a soft navy shadow all round that lifts the window
off the page, and a violet glow under it. isolation: the hairline and the dots stay inside the frame, so the small
photo that overlaps the Key features window covers them (no light line across the photo) */
.features__screen, .gps__map {
position: relative; isolation: isolate; border-radius: 12px;
box-shadow:
0 1px 3px rgba(7, 10, 27, .08),
0 16px 48px -8px rgba(7, 10, 27, .26),
0 40px 110px -30px rgba(100, 98, 255, .55);
}
.features__screen::before, .gps__map::before { /* hairline edge over the picture */
content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px #d3d7e8;
}
.features__screen::after, .gps__map::after { /* the three dots in the title bar */
content: ""; position: absolute; z-index: 2;
--dot: calc(var(--bar) * .3);
top: calc((var(--bar) - var(--dot)) / 2); left: calc(var(--bar) * .55);
width: var(--dot); height: var(--dot); border-radius: 50%;
background: #ff5f57; box-shadow: calc(var(--dot) * 1.8) 0 #febc2e, calc(var(--dot) * 3.6) 0 #28c840;
}
.features__screen {
--bar: 26px;
padding-top: var(--bar); overflow: hidden; /* hidden: the picture slides a little while the tab changes */
background: linear-gradient(#edeef5 var(--bar), #fff 0); /* title bar colour of the collage windows */
}
.features__screen img {
display: block; width: 100%; height: auto;
aspect-ratio: 1894 / 953; object-fit: cover; object-position: top left; /* the six screenshots differ by a few pixels in height: no jump when the tab changes */
transition: opacity .35s var(--ease), transform .5s var(--ease);
}
@media (max-width: 640px) { .features__screen { --bar: 20px; border-radius: 10px; } } /* phones: a slimmer title bar */
.features__photo {
position: absolute; left: 75.24%; top: 75.3%; width: 34%;
border-radius: 24px; overflow: hidden;
box-shadow: 0 24px 50px -20px rgba(16, 23, 36, .45);
}
.features__photo img { width: 100%; transition: opacity .35s var(--ease), transform .6s var(--ease); }
.is-swapping .features__screen img { opacity: 0; transform: translateY(10px); }
.is-swapping .features__photo img { opacity: 0; transform: scale(1.05); }
.features__photo { transition: opacity .35s var(--ease), visibility .35s; }
.features__visual.is-nophoto .features__photo { opacity: 0; visibility: hidden; } /* the AI Assistant tab has no photo */
.features__screen { transition: opacity .2s var(--ease); }
.features__visual.is-moving > * { opacity: 0; } /* stacked: the whole picture fades out while it moves under the new tab */
/* =========================================================
WHY / POSITIONING
========================================================= */
.why { padding: var(--sec-join) 0 var(--sec-y); background: var(--soft); }
/* the featured card is scaled 1.05 and pokes ~19px out of the row: keep the visible gap below it at --sec-y */
@media (min-width: 1201px) { .why { padding-bottom: calc(var(--sec-y) + 19px + 34px); } } /* + the CTA half below the card */
.why__head .lead { line-height: 1.5; }
.why__cards {
margin-top: 64px;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: center;
}
.why-card {
position: relative;
padding: 48px; border-radius: 24px; background: var(--white);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.why-card__head {
display: flex; flex-direction: column; gap: 7px;
padding: 7px 0 25px; border-bottom: 1px solid var(--line);
}
.why-card__title { font-size: 30px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.why-card__quote { font-size: 16px; line-height: 24px; color: var(--gray-2); }
.why-card__list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.why-card__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--gray-2); }
.why-card__list li img { flex: none; width: 24px; height: 24px; }
.why-card__list li.is-strong { color: var(--ink); }
.why-card--hero {
scale: 1.05;
z-index: 2;
isolation: isolate; /* not clipped: the badge sits on the top edge (same badge as the recommended pricing plan) */
background: var(--black); border: 1px solid rgba(255, 255, 255, .1);
box-shadow: var(--shadow-brand);
}
.why-card__glows { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.why-card__blob {
position: absolute; border-radius: 50%; opacity: .45;
background: var(--gradient); filter: blur(61px);
}
.why-card__blob--a { width: 355px; height: 355px; right: -167px; top: -155px; animation: drift 14s ease-in-out infinite alternate; }
.why-card__blob--b { width: 374px; height: 373px; right: 145px; top: 533px; animation: drift 17s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { translate: -40px 50px; } }
.why-card--hero .why-card__head { margin-top: 16px; gap: 8px; border-color: rgba(229, 225, 219, .2); padding-top: 0; }
.why-card--hero .why-card__title { font-size: 40px; line-height: 48px; color: var(--white); }
.why-card--hero .why-card__quote { color: var(--gray); }
.why-card--hero .why-card__list { padding-top: 8px; margin-top: 16px; }
.why-card--hero .why-card__list li { color: var(--white); }
.why-card__cta { margin-top: 46px; width: 100%; min-width: 0; }
/* the CTA sits on the card's bottom edge, half in and half out – like the badge on its top edge (height unchanged);
--cta-x = the card's side padding, the bottom padding keeps the old room under the list */
.why-card.why-card--hero { --cta-x: 48px; padding-bottom: calc(46px + 32px); }
.why-card--hero .why-card__cta { position: absolute; left: var(--cta-x); right: var(--cta-x); bottom: 0; z-index: 1; width: auto; margin: 0; translate: 0 50%; }
@media (max-width: 1440px) { .why-card.why-card--hero { --cta-x: 36px; } }
@media (max-width: 1200px) { .why-card.why-card--hero { margin-bottom: 32px; } } /* stacked cards: room for the half that sticks out */
@media (max-width: 640px) { .why-card.why-card--hero { --cta-x: 24px; padding-bottom: calc(32px + 28px); margin-bottom: 28px; } }
@media (max-width: 340px) { .why-card.why-card--hero { --cta-x: 18px; } }
/* =========================================================
PLATFORM
========================================================= */
.platform {
position: relative; overflow: hidden; isolation: isolate;
background: var(--black);
padding: var(--sec-y) 0; /* same gap above the title and below the lowest nodes */
}
.platform__bg { position: absolute; inset: 0; z-index: -1; }
.glow--plat-a {
width: 1088px; height: 1088px; left: -682px; top: -683px;
background: radial-gradient(closest-side, rgba(255, 210, 63, .5), rgba(115, 74, 12, .25) 60%, transparent);
}
.glow--plat-b {
width: 1311px; height: 1311px; left: calc(50% + 391px); top: 615px;
background: radial-gradient(closest-side, rgba(255, 210, 63, .45), rgba(115, 74, 12, .25) 60%, transparent);
}
.platform__title { color: var(--white); text-align: center; width: var(--wrap-narrow); margin-inline: auto; }
.platform__diagram {
--k: 1;
position: relative;
width: 1640px; height: 760px;
left: 50%; margin-left: -820px;
transform: scale(var(--k)); transform-origin: top center;
/* the diagram box has 79px of empty space under the lowest nodes (they end at 681px of 760px):
pull the section end up by all of it (scaled with the diagram) so the gap below the nodes
is exactly the 76px padding */
margin-bottom: calc(760px * (var(--k) - 1) - 79px * var(--k));
}
.platform__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.platform__lines path {
fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1; stroke-dasharray: 3 4;
opacity: 0; transition: opacity .8s var(--ease);
}
.platform__diagram.is-drawn .platform__lines path { opacity: 1; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.platform__core {
position: absolute; left: 820px; top: 339px; translate: -50% -50%;
padding: 24px 40px 24px 32px; border-radius: 24px;
background: var(--white); border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 0 25px var(--indigo);
z-index: 2;
}
.platform__core img { width: 416px; }
.platform__core.is-in { animation: pulse 3.2s ease-in-out 1.2s infinite; }
@keyframes pulse {
0%, 100% { box-shadow: 0 0 25px var(--indigo); }
50% { box-shadow: 0 0 45px rgba(255, 187, 45, .95); }
}
.node {
position: absolute; translate: -50% -50%; z-index: 2;
width: max-content; /* chips near the right edge must not shrink */
display: flex; align-items: center; gap: 16px;
height: 64px; padding: 0 24px; border-radius: 16px;
background: var(--chip); border: 1px solid rgba(255, 255, 255, .1);
font-size: 20px; letter-spacing: -.6px; color: var(--white); white-space: nowrap;
transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.node:hover { border-color: rgba(255, 210, 63, .6); background: #241704; box-shadow: 0 0 24px -6px rgba(255, 187, 45, .7); }
.node img { width: 24px; }
.node[data-node="tl"] { left: 298.5px; top: 124px; }
.node[data-node="tr"] { left: 1341.5px; top: 124px; }
.node[data-node="l1"] { left: 141.5px; top: 267px; }
.node[data-node="l2"] { left: 141.5px; top: 411px; }
.node[data-node="r1"] { left: 1505.5px; top: 267px; }
.node[data-node="r2"] { left: 1505.5px; top: 411px; }
.node[data-node="bl"] { left: 298.5px; top: 555px; }
.node[data-node="br"] { left: 1341.5px; top: 555px; }
.node[data-node="b1"] { left: 661px; top: 649px; }
.node[data-node="b2"] { left: 965.5px; top: 649px; }
.node[data-node="t"] { left: 820px; top: 124px; } /* AI Assistant: on top of the core – it reads every module */
/* the AI chip stands out: violet like the other AI accents, with a soft glow */
.node.node--ai {
background: linear-gradient(90deg, rgba(107, 92, 255, .55), rgba(85, 80, 240, .3));
border-color: rgba(151, 118, 254, .75); box-shadow: 0 0 28px -6px rgba(100, 98, 255, .85);
}
.node.node--ai:hover {
background: linear-gradient(90deg, rgba(107, 92, 255, .75), rgba(85, 80, 240, .45));
border-color: rgba(176, 152, 255, .9); box-shadow: 0 0 34px -4px rgba(100, 98, 255, .95);
}
/* =========================================================
REVIEWS
========================================================= */
.reviews { padding: var(--sec-join) 0; background: var(--soft); }
.reviews__title { text-align: center; color: var(--black); }
/* one testimonial: photo / video on the left, quote on the right */
.testimonial {
margin: 56px 0 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
min-height: 560px;
border-radius: 24px; overflow: hidden; isolation: isolate;
background: var(--black);
box-shadow: 0 32px 80px -40px rgba(196, 122, 0, .45);
}
/* no background and no backdrop under a video that fills the slot: anything dark under the video shows as a dark rim
along the card's anti-aliased rounded corners (with nothing under it, the corners blend with the page) */
.testimonial__media { position: relative; overflow: hidden; container-type: size; }
/* blurred copy of the poster fills the space around the video – only when the whole frame is shown (below) */
.testimonial__backdrop {
display: none;
position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none;
object-fit: cover; filter: blur(28px) brightness(.55); pointer-events: none;
}
.testimonial__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
/* captions sit at 10–91% of the video width: once the slot is narrower than ~10:9, show the whole frame */
@container (max-aspect-ratio: 10 / 9) {
.testimonial__video { object-fit: contain; }
.testimonial__backdrop { display: block; }
}
.testimonial__play {
position: absolute; left: 24px; bottom: 24px; z-index: 1;
display: inline-flex; align-items: center; gap: 14px;
padding: 8px 24px 8px 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
background: rgba(11, 8, 5, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font: inherit; font-size: 16px; font-weight: 600; color: var(--white); cursor: pointer;
transition: background .35s var(--ease), transform .35s var(--ease);
}
.testimonial__play[hidden] { display: none; }
.testimonial__play small { margin-left: 6px; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.testimonial__play-icon {
flex: none; width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center;
background: var(--gradient); box-shadow: 0 10px 30px -10px rgba(255, 164, 27, .8);
transition: transform .35s var(--ease);
}
.testimonial__play-icon svg { margin-left: 3px; }
.testimonial__play:hover { background: rgba(11, 8, 5, .72); }
.testimonial__play:hover .testimonial__play-icon { transform: scale(1.08); }
.testimonial__play:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.testimonial__body {
position: relative; z-index: 0; overflow: hidden;
display: flex; flex-direction: column; justify-content: center; gap: 32px;
padding: 64px 72px;
}
.testimonial__blob {
position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
background: var(--gradient); filter: blur(70px); opacity: .28;
}
.testimonial__blob--a { width: 360px; height: 360px; right: -170px; top: -170px; animation: drift 14s ease-in-out infinite alternate; }
.testimonial__blob--b { width: 320px; height: 320px; left: -190px; bottom: -210px; animation: drift 17s ease-in-out infinite alternate-reverse; }
.testimonial__logo { width: 240px; }
.testimonial__quote { font-size: 22px; line-height: 1.6; letter-spacing: -.01em; color: var(--white); }
.testimonial__quote b { font-weight: 700; }
.testimonial__author {
display: flex; flex-direction: column; gap: 6px;
padding-top: 24px; border-top: 1px solid rgba(229, 225, 219, .2);
}
.testimonial__author b { font-size: 20px; font-weight: 600; color: var(--white); }
.testimonial__author span { font-size: 16px; color: var(--gray); }
/* desktop: the video slot has the film's own 4:3 shape, so the film fills its half completely
(no empty bars, no cropping) and the card's height follows it. The quote side is sized in
container units (designed at 1360px wide) so it always fits beside the film. */
@media (min-width: 1201px) {
.testimonial { container-type: inline-size; min-height: 0; }
.testimonial__media { aspect-ratio: 4 / 3; }
.testimonial__body { padding: 3.8cqi 4.4cqi; gap: 2.2cqi; }
.testimonial__logo { width: 17.6cqi; }
.testimonial__quote { font-size: 1.6cqi; line-height: 1.55; }
.testimonial__author { padding-top: 1.75cqi; gap: .45cqi; }
.testimonial__author b { font-size: 1.47cqi; }
.testimonial__author span { font-size: 1.18cqi; }
}
/* =========================================================
GPS
========================================================= */
.gps { padding: var(--sec-join) 0; background: var(--soft); }
.gps__lead { max-width: 916px; line-height: 27.9px; }
.gps__lead-short { display: none; } /* phones get a shorter version of the text */
.gps__lead-mid { display: none; }
/* tablets: a medium version, so the text stays within 5 lines */
@media (min-width: 641px) and (max-width: 999px) {
.gps__lead-long { display: none; }
.gps__lead-mid { display: inline; }
}
/* ---------- GPS flow: machine → map → report card → invoice card ----------
wide screens: one row; ≤1200px: a column. Map and cards share the map frame's proportions. */
.gps__flow {
margin-top: 64px;
display: grid; align-items: center;
grid-template-columns: minmax(0, .55fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
}
/* scissor lift + round tracker badge, composed as on the original Figma layout */
.gps__machine { position: relative; aspect-ratio: 389 / 321; }
.gps__machine > div { position: absolute; }
.gps__lift { left: 0; top: 2.8%; width: 69.1%; mix-blend-mode: darken; }
.gps__device-round { left: 28.1%; top: 0; width: 71.9%; z-index: 1; }
/* arrows between the stages (each one leads to the next): same orange and 2px stroke as the “+” icons in Key features */
.gps__link { display: flex; align-items: center; justify-content: center; }
.gps__link::before {
content: ""; width: 24px; height: 24px; background: #eda532;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gps__panel { position: relative; aspect-ratio: 598 / 372; } /* the map's device frame, without the glow under it */
/* the map card: the same light window frame; the screenshot sits in an inner box under the title bar and is cropped
from the left, so the app menu drops out and the map with its pop-up stays (title bar in container units like the
report cards; no cqi on the card itself – on a container, cqi would measure the page, not the card – so the card's
own background is the title bar colour and the map covers the rest) */
.gps__map { container-type: inline-size; --bar: 6.6cqi; background: #edeef5; border-radius: 10px; }
.gps__map-in { position: absolute; inset: var(--bar) 0 0; overflow: hidden; border-radius: 0 0 10px 10px; background: #fff; }
.gps__map img { position: absolute; left: -17.7%; top: 0; width: 118%; max-width: none; height: auto; } /* 118% wide, shifted left 15% of the picture: the app menu (≈ 14%) drops out */
.gps__card { container-type: inline-size; }
/* look + layout live on the inner box: [data-reveal] owns the card's own transform/transition */
.gps__card-in {
position: absolute; inset: 0; padding: 6cqi;
display: grid; grid-template-columns: 30cqi minmax(0, 1fr); gap: 5.5cqi; align-items: center;
background: var(--white); border-radius: 5.8cqi; /* ≈ 20px at 350px wide */
box-shadow: 0 24px 60px -24px rgba(101, 97, 255, .28), 0 2px 8px rgba(23, 15, 4, .04);
transition: transform .4s var(--ease);
}
.gps__card:hover .gps__card-in { transform: translateY(-4px); }
.gps-doc { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.5cqi 3cqi rgba(38, 33, 122, .16)); }
.gps-doc text { font-family: "Sora", system-ui, sans-serif; text-rendering: geometricPrecision; }
.gps__card h3 { font-size: 6.2cqi; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--black); }
.gps__card p { margin-top: 1.8cqi; font-size: 4.1cqi; line-height: 1.5; color: var(--gray-2); }
/* =========================================================
INTEGRATIONS (Wojtek's section, 5 Nov 2026)
The API card is navy like the other dark cards; partner tiles sit in white cards.
Wide screens: two columns (API card | three groups of tiles). ≤1200px: one column.
========================================================= */
.integrations { padding: var(--sec-join) 0; background: var(--soft); }
.integrations__lead { max-width: 860px; }
.integrations__grid {
margin-top: 64px;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch;
}
/* ---------- API card ---------- */
.api-card {
--gray: #b3afd6; /* secondary text on navy, as on the other dark cards */
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
padding: 48px; border-radius: 24px;
color: var(--gray); background: var(--mark-navy); border: 1px solid rgba(255, 255, 255, .1);
box-shadow: var(--shadow-brand);
}
.api-card__glow {
position: absolute; z-index: -1; right: -170px; top: -170px; width: 360px; height: 360px;
border-radius: 50%; background: var(--mark-glow); filter: blur(61px); opacity: .32; pointer-events: none;
animation: drift 14s ease-in-out infinite alternate;
}
.api-card__badge {
display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border-radius: 999px;
font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--white);
background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.api-card__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); }
.api-card__title { font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--white); text-wrap: balance; }
.api-card__text { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.api-card__list { display: flex; flex-direction: column; gap: 12px; }
.api-card__list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.api-card__list li::before { /* the plans' tick, light as in the Complete card */
content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: #dcd9f2;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* sample API response: no scrolling (it is hidden from screen readers, and a scroll box would take keyboard focus),
so the type gets smaller on narrow cards instead */
.api-card__code {
align-self: stretch; overflow: hidden;
margin: 0; padding: 16px 20px; border-radius: 14px; /* margin: has 1em above and below by default */
font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 13px; line-height: 1.7; white-space: pre; color: #e4e2f5;
background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.api-card__code .c { color: #9a96c4; } /* comment */
.api-card__code .k { color: #c9c0ff; } /* keys */
.api-card__code .s { color: #a8e0b4; } /* text values */
.api-card__cta { margin-top: auto; } /* the button sits at the bottom when the card is taller than its content */
/* ---------- partner groups and tiles ---------- */
.integrations__groups { display: flex; flex-direction: column; gap: 24px; }
.int-group {
flex: auto; /* the three cards share any height the API card adds; tiles stay centred in them */
display: flex; flex-direction: column; justify-content: center; gap: 18px;
padding: 32px; border-radius: 24px; background: var(--white);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.int-group__title {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-2);
}
.int-group__icon { flex: none; width: 20px; height: 20px; color: var(--label-violet-ink); }
.int-group__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.int-tile {
height: 84px; padding: 12px 16px; border-radius: 14px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
text-align: center; color: var(--ink); background: var(--soft); border: 1px solid transparent;
transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.int-tile:hover { background: var(--white); border-color: rgba(23, 15, 4, .12); transform: translateY(-2px); }
.int-tile__name { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
/* an official logo from assets/logos/, in its original colours; the name then hides. Optical balance: each logo's
height in px is set on the ![]()
as --lh: wide or heavy logos lower (Comarch 19), compact ones 30–34; the stacked
Wapro logo 50, because its lettering is only a third of its height */
.int-tile img { width: auto; height: calc(var(--lh, 34) * 1px); max-width: 100%; object-fit: contain; }
.int-tile:has(img) .int-tile__name { display: none; }
/* a logo that sits in a band across a larger picture (Exact: 640×480 JPG, rows 172–294; Microsoft Azure: 1024×576 PNG,
rows 199–372). The file stays as it is: the box gets the band's shape (--band: picture width / band height) and the
picture is cropped to it, centred on the band (--band-y) */
.int-tile img.int-tile__logo--band { aspect-ratio: var(--band); object-fit: cover; object-position: 50% var(--band-y, 50%); }
/* …on a white background (Exact): multiply melts the white into the tile colour (on the white hover background the
logo is exactly as in the file) */
.int-tile img.int-tile__logo--on-white { mix-blend-mode: multiply; }
/* “+ Your system”: opens the demo form */
.int-tile--more { background: transparent; border: 1.5px dashed rgba(23, 15, 4, .22); }
.int-tile--more .int-tile__name { font-size: 15px; }
.int-tile--more small { font-size: 13px; line-height: 1.3; color: var(--gray-2); }
.int-tile--more:hover { background: transparent; border-color: #ffa41b; }
@media (max-width: 1440px) {
.api-card { padding: 40px 36px; }
.api-card__cta { padding-left: 28px; gap: 12px; font-size: 17px; } /* as the CTA in the EQrento card */
.int-group { padding: 28px; }
}
/* tablets: one column (API card, then the groups), as narrow as the testimonial */
@media (max-width: 1200px) {
.integrations__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
}
@media (max-width: 640px) {
.integrations__grid { margin-top: 40px; gap: 16px; }
.integrations__groups { gap: 16px; }
.api-card { gap: 20px; padding: 28px 24px; border-radius: 20px; }
.api-card__title { font-size: 24px; }
.api-card__text { font-size: 15px; }
.api-card__code { padding: 14px 16px; font-size: 12px; }
.api-card__cta { align-self: stretch; min-width: 0; }
.int-group { gap: 16px; padding: 24px 20px; border-radius: 20px; }
.int-group__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.int-group__tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last tile fills its row */
.int-tile { height: 72px; }
.int-tile:has(img) { padding-inline: 8px; } /* narrow tiles: a wide logo gets almost the whole width (Teltonika ≈ 100px at 320px) */
.int-tile img { height: calc(var(--lh, 34) * .8px); } /* logos 20% smaller in the smaller phone tiles */
.int-tile__name { font-size: 15px; }
}
@media (max-width: 380px) {
.api-card { padding-inline: 20px; }
.api-card__code { padding: 12px 14px; font-size: 11px; }
.int-group { padding-inline: 16px; }
}
/* 320px: the button is only 238px wide – smaller type and arrow, as the CTA in the EQrento card
(.api-card in front: it must beat the site-wide 340px rule for .btn--arrow, which comes later in this file) */
@media (max-width: 340px) {
.api-card .api-card__cta { padding-left: 18px; gap: 6px; font-size: 14px; }
.api-card__cta .btn__icon { width: 40px; height: 40px; }
}
/* =========================================================
PRICING
========================================================= */
.pricing { padding: var(--sec-join) 0; background: var(--soft); }
.pricing__head .lead { max-width: 640px; }
/* yearly / monthly switch – main.js swaps every [data-yearly] / [data-monthly] text */
.billing {
display: inline-flex; gap: 4px; margin-top: 8px; padding: 4px; border-radius: 999px;
background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(23, 15, 4, .08);
}
.billing__opt {
display: inline-flex; align-items: center; gap: 8px;
height: 44px; padding: 0 22px; border-radius: 999px;
font-size: 15px; font-weight: 600; color: var(--gray-2);
transition: color .3s var(--ease);
}
.billing__opt:hover { color: var(--ink); }
.billing__opt[aria-pressed="true"] { background: var(--gradient); color: #170f04; }
.billing__save { padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.4; background: rgba(23, 15, 4, .08); }
/* four cards in a row; each card is a subgrid of 7 rows (name, text, price with its billing note,
limits, button, intro, list), so prices, buttons and lists line up across the cards */
.plans {
margin-top: 56px;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px;
}
.plan {
position: relative; isolation: isolate;
grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0;
padding: 36px 32px; border-radius: 24px; background: var(--white);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
@supports not (grid-template-rows: subgrid) { .plan { display: flex; flex-direction: column; } .plan__price--quote { align-self: stretch; } }
.plan__name { font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--ink); }
/* sits on the card's top edge (out of the grid flow), so it never competes with the plan name for room */
.plan__badge {
position: absolute; top: 0; left: 50%; translate: -50% -50%;
display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 999px;
font-size: 15px; line-height: 1.1; font-weight: 600; white-space: nowrap; color: #170f04; background: var(--gradient);
box-shadow: 0 8px 20px -8px rgba(255, 164, 27, .7);
}
.plan__desc { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--gray-2); text-wrap: balance; }
/* the price with “/month” and, right under it, “billed yearly” beside the figure (Łukasz, 5 Nov 2026) */
.plan__price {
align-self: start; /* top of the price row: level with “Ask for a quote”, whose note makes that row taller */
margin-top: 28px; display: flex; align-items: center; gap: 10px;
font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.plan__per { display: flex; flex-direction: column; line-height: 1.3; letter-spacing: 0; }
.plan__price small { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--gray-2); }
.plan__price small.plan__billing { font-size: 14px; }
/* “Ask for a quote” is set like the prices (same size, weight, tracking), with “tailored to your fleet” under it.
It is wider than “$799 /month”, so on one line it only fits the card at the price size when the card is wide (tablet / phone);
in the narrow four-column row the span shrinks to the card’s inner width (100cqi of the , 7.45em = the text’s width in em). */
.plan__price--quote { container-type: inline-size; flex-direction: column; align-items: flex-start; gap: 4px; }
.plan__price--quote span { display: block; white-space: nowrap; font-size: min(1em, calc(100cqi / 7.45)); }
.plan__limits {
margin-top: 24px; padding: 14px 16px; border-radius: 14px;
display: flex; flex-direction: column; gap: 4px;
font-size: 14px; line-height: 1.45; color: var(--gray-2); background: rgba(255, 210, 63, .12);
}
.plan__limits b { font-weight: 600; color: var(--ink); }
.plan__cta { margin-top: 24px; width: 100%; height: 56px; padding: 0 24px; font-size: 16px; }
.plan__intro {
margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(23, 15, 4, .08);
font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink);
}
.plan__list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.plan__list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; color: var(--gray-2); text-wrap: pretty; } /* pretty: no single word left on the last line */
.plan__list li::before { /* same tick as the hero chips */
content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: #eda532;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* recommended plan: dark card with drifting glows, like the EQrento card in “Why” */
.plan--hero { background: var(--black); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-brand); }
.plan--hero .plan__name, .plan--hero .plan__price, .plan--hero .plan__intro, .plan--hero .plan__limits b { color: var(--white); }
.plan--hero .plan__desc, .plan--hero .plan__billing, .plan--hero .plan__price small, .plan--hero .plan__limits { color: var(--gray); }
.plan--hero .plan__limits { background: rgba(255, 255, 255, .07); }
.plan--hero .plan__intro { border-color: rgba(229, 225, 219, .2); }
.plan--hero .plan__list li { color: rgba(255, 255, 255, .88); }
.plan--hero .plan__list li::before { background: #ffd23f; }
.plan__glows { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } /* clips the glows, not the badge */
.plan__blob {
position: absolute; border-radius: 50%;
background: var(--gradient); filter: blur(61px); opacity: .32;
}
.plan__blob--a { width: 300px; height: 300px; right: -150px; top: -150px; animation: drift 14s ease-in-out infinite alternate; }
.plan__blob--b { width: 320px; height: 320px; left: -190px; bottom: -200px; animation: drift 17s ease-in-out infinite alternate-reverse; }
.pricing__tracker {
margin: 40px auto 0; max-width: 940px;
display: flex; align-items: center; gap: 20px;
padding: 20px 28px; border-radius: 20px; background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
font-size: 15px; line-height: 1.5; color: var(--gray-2);
}
.pricing__tracker b { font-weight: 600; color: var(--ink); }
.pricing__tracker + .pricing__tracker { margin-top: 16px; } /* the AI Assistant box right under the telemetry box */
.pricing__note { margin: 20px auto 0; max-width: 760px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--gray-2); }
@media (min-width: 1201px) { .pricing__note { max-width: none; } } /* wide screens: the whole note on one line */
/* ---------- full feature comparison (pricing.html, always open) ----------
No clipping box around the table: the header row sticks under the page header while the table scrolls by. The card is
position: relative, so the visually hidden (.sr-only, absolute) labels inside stay within it. */
.cmp__card {
position: relative;
margin-top: 24px; padding: 8px 16px 16px; border-radius: 24px;
background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
/* separate borders: with collapsed borders the lines would not travel with the sticky header */
.cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.cmp__table th, .cmp__table td { padding: 13px 16px; border-bottom: 1px solid rgba(23, 15, 4, .07); }
.cmp__table thead th {
position: sticky; top: 84px; z-index: 1; /* right under the scrolled page header (84 / 72 / 64px, see the breakpoints) */
padding: 18px 10px 14px; background: var(--white);
font-size: 16px; font-weight: 600; text-align: center; vertical-align: top;
border-bottom-color: rgba(23, 15, 4, .14);
}
/* plan and price (swapped with the yearly / monthly switch) in each column head */
.cmp__plan, .cmp__price { display: block; }
.cmp__price { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--gray-2); }
.cmp__table [hidden] { display: none; } /* “Show only differences” hides rows and whole categories */
.cmp__table th[scope="row"] { width: 40%; font-weight: 400; text-align: left; text-wrap: pretty; }
.cmp__table td { width: 15%; text-align: center; }
.cmp__group th {
padding: 36px 16px 10px; text-align: left;
font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-2);
border-bottom-color: rgba(23, 15, 4, .14);
}
.cmp__table tbody:first-of-type .cmp__group th { padding-top: 24px; }
/* group icons: the orange icons on a light tint, as in Key features, so each group is easy to spot in the long table */
.cmp__ico {
display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -9px 12px -9px 0;
vertical-align: middle; border-radius: 9px; background: var(--tint);
}
.cmp__ico img { width: 20px; height: 20px; object-fit: contain; }
/* the recommended plan's column, lightly tinted (opaque, so rows never show through the sticky header) */
.cmp__table tr > :nth-child(3) { background: #fffbef; }
.cmp__table .y::before, .cmp__table .n::before { content: ""; display: inline-block; vertical-align: middle; }
.cmp__table .y::before {
width: 20px; height: 20px; background: #eda532;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cmp__table .n::before { width: 12px; height: 2px; border-radius: 2px; background: #d6d0c8; }
.cmp__table .t { font-size: 14px; font-weight: 600; }
/* notes in plan cells (“Without checklists”, “$69 per device, one-time”) look like the feature names: regular weight, same size */
.cmp__table td.t--note { font-size: inherit; font-weight: 400; line-height: inherit; }
@media (max-width: 640px) { .cmp__table td.t--note { font-size: 14px; line-height: 1.35; } }
/* ---------- pricing page (pricing.html) ---------- */
.pricing--page { padding-top: calc(var(--header-h) + 40px); } /* starts under the fixed header, like the policy pages */
.compare { padding: var(--sec-join) 0; background: var(--soft); }
.compare__title { text-align: center; }
.compare__tools { margin-top: 32px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
/* “Show only differences”: a pill with a small switch; on = the button gradient */
.compare__diff {
display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px 0 10px; border-radius: 999px;
font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap;
background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(23, 15, 4, .08);
}
.compare__diff::before {
content: ""; flex: none; width: 38px; height: 22px; border-radius: 999px;
background: radial-gradient(circle at 11px 50%, #fff 7px, transparent 7.5px), rgba(23, 15, 4, .2);
}
.compare__diff[aria-pressed="true"]::before { background: radial-gradient(circle at 27px 50%, #fff 7px, transparent 7.5px), var(--gradient); }
/* the plan switch above the table – phones only (a segmented control, like the yearly / monthly switch) */
.seg {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px;
background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(23, 15, 4, .08);
}
.seg__opt { height: 40px; padding: 0 4px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gray-2); white-space: nowrap; }
.seg__opt[aria-pressed="true"] { background: var(--gradient); color: #170f04; }
.compare__plans { display: none; }
/* the FAQ is followed by the closing button here, so it gets the join spacing below */
.faq--pricing { padding-bottom: var(--sec-join); }
.pricing-cta { display: flex; justify-content: center; padding: var(--sec-join) var(--gutter) var(--sec-y); background: var(--soft); }
/* tablets: five columns stay, the feature column gives up room so “Connected” fits its column head */
@media (max-width: 1023px) {
.cmp__table th[scope="row"] { width: 36%; }
.cmp__table td { width: 16%; }
.cmp__table th, .cmp__table td { padding-inline: 8px; }
.cmp__table thead th { padding-inline: 6px; }
}
/* phones: the features and ONE plan (data-plan on the table, 1–4, Complete to start with; pricing.js) */
@media (max-width: 767px) {
.compare__tools { flex-direction: column; align-items: stretch; }
.compare__plans { display: grid; }
.compare__diff { align-self: center; }
.cmp__card { padding: 0 8px 8px; }
.cmp__table th[scope="row"] { width: 58%; }
.cmp__table thead th:not(:first-child), .cmp__table td { display: none; width: auto; }
.cmp__table[data-plan="1"] tr > :nth-child(2), .cmp__table[data-plan="2"] tr > :nth-child(3),
.cmp__table[data-plan="3"] tr > :nth-child(4), .cmp__table[data-plan="4"] tr > :nth-child(5) { display: table-cell; }
}
/* the narrowest phones: “Enterprise” and “Connected” must fit a quarter of the plan switch */
@media (max-width: 360px) {
.seg { gap: 2px; }
.seg__opt { padding: 0 2px; font-size: 11.5px; letter-spacing: -.01em; }
}
/* ---------- home page teaser: four mini tiles and the way to pricing.html ---------- */
.tiers { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tier {
position: relative; display: flex; flex-direction: column;
padding: 32px 28px 28px; border-radius: 24px; background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.tier__name { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ink); }
/* the price and, beside it, “/month” with “billed yearly” right under it (as on the pricing cards); on phones the pair
goes under the figure (see the 640px rule), still one line under the other */
.tier__price {
margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
font-size: 14px; line-height: 1.3; color: var(--gray-2);
}
.tier__price b { font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.tier__per { display: flex; flex-direction: column; }
.tier__price--quote b { font-size: 28px; letter-spacing: -.01em; }
/* fleet limit and “Unlimited users and branches”, set like the limits on the pricing cards */
.tier__limits {
margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px;
font-size: 14px; line-height: 1.4; color: var(--gray-2);
}
.tier__limits b { font-weight: 600; color: var(--ink); }
/* Complete: the recommended plan, navy like its card on pricing.html, with the same badge */
.tier--hero { box-shadow: var(--shadow-brand); }
.tier--hero .tier__name, .tier--hero .tier__price b, .tier--hero .tier__limits b { color: var(--white); }
.tier--hero .tier__price, .tier--hero .tier__limits { color: #b3afd6; }
.tiers__ctas { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 1200px) { .tier { padding: 28px 22px 24px; } .tier__price b { font-size: 34px; } }
/* 2 × 2 from 1100px down: in four narrower tiles “/month” + “billed yearly” would fit beside some prices and not others */
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; max-width: 680px; margin-inline: auto; } }
@media (max-width: 640px) {
.tiers { margin-top: 40px; gap: 28px 12px; }
.tier { padding: 26px 16px 18px; border-radius: 20px; }
.tier__name { font-size: 18px; }
/* phone tiles are too narrow for the note beside the figure: in every tile it goes under it, “billed yearly” still right under “/month” */
.tier__price { margin-top: 10px; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; }
.tier__price b { font-size: 28px; }
.tier__price--quote b { font-size: 20px; }
.tier__limits { font-size: 13px; }
.tiers__ctas { flex-direction: column; align-items: stretch; }
.tiers__ctas .btn { width: 100%; }
}
/* the narrowest phones: a little less padding and type, so “Up to 50 units” keeps one line and “Unlimited users and
branches” two */
@media (max-width: 360px) {
.tier { padding-inline: 14px; }
.tier__price, .tier__limits { font-size: 12px; }
}
/* 320px: “Compare plans and features” needs smaller type and arrow to fit the 280px button (as the EQrento card's CTA) */
@media (max-width: 340px) {
.tiers__ctas .btn--arrow { padding-left: 18px; gap: 6px; font-size: 14px; }
.tiers__ctas .btn__icon { width: 40px; height: 40px; }
}
/* =========================================================
FAQ
========================================================= */
/* the FAQ is the last section before the dark footer: the full section spacing below it, not the join spacing */
.faq { padding: var(--sec-join) 0 var(--sec-y); background: var(--soft); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 823fr); gap: 97px; align-items: start; }
.faq__title { color: var(--black); }
.faq__list { display: flex; flex-direction: column; gap: 0; }
.qa { border-radius: 24px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.qa.is-open { background: var(--white); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.qa:not(.is-open):hover { background: rgba(255, 255, 255, .6); }
.qa__q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px;
padding: 24px 32px; text-align: left;
font-size: 20px; font-weight: 600; line-height: 1.1; color: var(--ink);
}
.qa.is-open .qa__q { padding-top: 32px; }
.qa__icon {
position: relative; flex: none; width: 24px; height: 24px;
}
.qa__icon::before, .qa__icon::after {
content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 2px; background: var(--brand);
transition: transform .4s var(--ease);
}
.qa__icon::after { transform: rotate(90deg); }
.qa.is-open .qa__icon::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa__a > div { overflow: hidden; min-height: 0; }
.qa__a p {
padding: 0 32px 32px; max-width: 760px;
font-size: 16px; line-height: 1.5; color: var(--gray-2);
opacity: 0; transition: opacity .35s var(--ease);
}
.qa__a a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa.is-open .qa__a p { opacity: 1; transition-delay: .12s; }
.qa__q:hover .qa__icon::before, .qa__q:hover .qa__icon::after { background: var(--violet); }
/* =========================================================
FOOTER
========================================================= */
.footer {
position: relative; overflow: hidden; isolation: isolate;
background: #0b0805; color: var(--gray);
padding: var(--sec-y) 0 40px; /* top part of the footer follows the section gap */
font-size: 14px; line-height: 1.7;
}
.footer::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(40% 60% at 0% 0%, rgba(204, 131, 22, .35), transparent 70%);
}
.glow--footer {
z-index: -1; width: 900px; height: 600px; left: 50%; bottom: -380px; translate: -40% 0;
background: radial-gradient(closest-side, rgba(235, 151, 25, .55), transparent);
}
.footer__grid { display: grid; grid-template-columns: 485fr 452fr 309fr auto; gap: 32px; }
.footer__brand img { width: 246px; }
.footer__brand p { margin-top: 24px; max-width: 320px; }
.footer__brand p + p { margin-top: 24px; }
.footer__col { padding-top: 24px; }
.footer__col h3 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 18px; }
.footer__col li + li { margin-top: 10px; }
.footer a { transition: color .25s var(--ease); }
.footer a:hover { color: var(--white); }
/* tagline “Crafted with grit in Poland…”: centred above the line, as far above it (24px) as the bottom row is below it,
set like the footer text above it (14px); narrow phones: it breaks after “Poland,” (its halves are .nowrap) */
.footer__tagline { margin-top: 56px; font-size: 14px; text-align: center; text-wrap: balance; }
.footer__tagline svg { display: inline-block; vertical-align: -1px; }
.footer__bottom {
margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08);
display: flex; justify-content: space-between; gap: 16px; font-size: 12px;
}
/* desktop: copyright on the left, the links on the right – Privacy Policy, Cookie Policy, Cookie settings, icon credit
(the free Flaticon licence asks for “Uicons by Flaticon” with a link, near the icons or in the footer) */
@media (min-width: 1201px) { .footer__bottom > * { white-space: nowrap; } }
/* tablets and phones: one centred column, the links above the copyright */
@media (max-width: 1200px) {
.footer__bottom { flex-direction: column-reverse; align-items: center; gap: 12px; text-align: center; }
.footer__legal { justify-content: center; }
}
/* the copyright breaks only after “z o.o.”: where it no longer fits on one line, “All Rights Reserved” gets its own line (there is no bullet: “o.o.” already ends with a full stop) */
@media (max-width: 380px) {
.footer__rights { display: block; }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__cookie-btn {
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; color: inherit; transition: color .25s var(--ease);
}
.footer__cookie-btn:hover { color: var(--white); }
/* =========================================================
COOKIE BANNER – non-blocking card, bottom left (bottom sheet on phones)
========================================================= */
.cookie {
position: fixed; z-index: 200; left: 24px; bottom: 24px;
width: min(440px, calc(100% - 48px)); padding: 24px; border-radius: 20px;
background: var(--white); color: var(--ink); font-size: 14px; line-height: 1.55;
box-shadow: 0 24px 60px -16px rgba(23, 15, 4, .35), 0 0 0 1px rgba(23, 15, 4, .06);
opacity: 0; transform: translateY(16px);
transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.cookie[hidden] { display: none; }
.cookie.is-visible { opacity: 1; transform: none; }
.cookie__title { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--black); }
.cookie__text { margin-top: 8px; color: var(--gray-2); }
.cookie__text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie__prefs { margin-top: 16px; display: grid; gap: 8px; }
.cookie__prefs[hidden] { display: none; }
.cookie__opt {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 12px 14px; border-radius: 12px; background: var(--soft); cursor: pointer;
}
.cookie__opt b { display: block; font-size: 14px; color: var(--black); }
.cookie__opt small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--gray-2); }
/* switch */
.cookie__opt input {
appearance: none; -webkit-appearance: none; position: relative; flex: none;
width: 40px; height: 24px; margin: 0; border-radius: 999px; background: #d8d4cd; cursor: pointer;
transition: background .25s var(--ease);
}
.cookie__opt input::before {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease);
}
.cookie__opt input:checked { background: #eda532; }
.cookie__opt input:checked::before { transform: translateX(16px); }
.cookie__opt input:disabled { opacity: .55; cursor: not-allowed; }
.cookie__opt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* buttons – “Reject all” is as big and as easy to reach as “Accept all” */
.cookie__actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie__btn {
height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(23, 15, 4, .18);
background: var(--white); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.cookie__btn:hover { border-color: rgba(23, 15, 4, .45); }
.cookie__btn--primary { border-color: transparent; background: var(--gradient); color: #170f04; }
.cookie__btn--primary:hover { border-color: transparent; transform: translateY(-1px); }
.cookie__btn--wide { grid-column: 1 / -1; }
/* while customising, “Save my choices” is the main action; “Accept all” steps back to an outlined button */
.cookie.is-custom .cookie__btn--primary[data-cookie="accept"] { border-color: rgba(23, 15, 4, .18); background: var(--white); }
.cookie__btn--link {
grid-column: 1 / -1; height: auto; padding: 6px; border: 0; background: none;
color: var(--gray-2); text-decoration: underline; text-underline-offset: 3px;
}
.cookie__btn[hidden] { display: none; }
.cookie__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 640px) {
.cookie {
left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
/* =========================================================
DEMO REQUEST DIALOG – every “Book a demo” button opens it (#book-demo, main.js)
The