/* Styles for cloud.html only, moved out of the page so browsers can cache them (#15). */
@font-face { font-family: 'Lato'; src: url('fonts/lato-light.woff2') format('woff2'), url('fonts/lato-light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-lightitalic.woff2') format('woff2'), url('fonts/lato-lightitalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-regular.woff2') format('woff2'), url('fonts/lato-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-bold.woff2') format('woff2'), url('fonts/lato-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-black.woff2') format('woff2'), url('fonts/lato-black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-blackitalic.woff2') format('woff2'), url('fonts/lato-blackitalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }
:root {
--prussian: #02263F;
--airforce: #5F99BB;
--veridian: #138E32;
--sky: #ADDDF6;
--alice: #F0F6FA;
--orange: #E6532B;
--yellow: #EEAD00;
--dark-grey: #38484F;
--light-grey: #ABB2B6;
--white: #FFFFFF;
--nav-h: 80px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--prussian);
color: var(--sky);
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
#bg-canvas { display: none; }
.page-wrap { position: relative; z-index: 1; }
/* ── NAV ── */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; font-family: 'Lato', sans-serif; }
.nav-bar { display: flex; align-items: center; height: var(--nav-h); padding: 0; position: relative; transition: box-shadow 0.4s ease; }
/* Blur + tint live on a layer BEHIND the nav content so logos/text stay crisp */
.nav-bar::before { content: ''; position: absolute; inset: 0; background: rgba(2,38,63,0.94); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0; }
.site-nav.scrolled .nav-bar::before { opacity: 1; }
.site-nav.scrolled .nav-bar { box-shadow: 0 1px 0 rgba(95,153,187,0.12), 0 8px 40px rgba(0,0,0,0.45); }
.nav-bar > * { position: relative; z-index: 1; }
.nav-logo { display: flex; align-items: flex-start; flex-direction: column; gap: 3px; flex-shrink: 0; margin-right: 12px; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-logo-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.25); margin: 0 20px; flex-shrink: 0; }
.nav-logo img.nav-logo-s2c { height: 10px; width: auto; display: block; opacity: 1; margin-top: 4px; position: relative; z-index: 2; }
.nav-item { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.92); white-space: nowrap; cursor: pointer; letter-spacing: 0.03em; transition: background 0.18s, color 0.18s; border: none; background: none; }
.nav-item .ti { font-size: 0.7rem; opacity: 0.6; transition: transform 0.22s; }
.nav-item:hover, .nav-item.on { color: #fff; background: rgba(95,153,187,0.14); }
.nav-item.on .ti-chevrons-down { transform: rotate(180deg); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px 0 24px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-center { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; margin: 0 6px; }
.nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); margin: 0 6px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: none; background: none; color: rgba(255,255,255,0.7); font-size: 1.05rem; cursor: pointer; transition: background 0.18s, color 0.18s; }
.icon-btn:hover, .icon-btn.on { background: rgba(95,153,187,0.14); color: #fff; }
.lang-btn { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 30px; border: 1px solid rgba(95,153,187,0.25); background: none; font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.75); cursor: pointer; letter-spacing: 0.04em; transition: all 0.18s; }
.lang-btn:hover, .lang-btn.on { background: rgba(95,153,187,0.12); border-color: rgba(95,153,187,0.45); color: #fff; }
.cta-btn-secondary { padding: 7px 10px; border-radius: 30px; border: none; background: var(--sky); box-shadow: none; font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--prussian); cursor: pointer; letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap; }
.cta-btn-secondary:hover { transform: translateY(-1px); background: #c8eaf8; }
.cta-btn { padding: 7px 10px; border-radius: 30px; border: none; background: var(--orange); box-shadow: none; font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff; cursor: pointer; letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap; }
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(230,83,43,0.55); }
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-mobile-toggle span { display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.25s; }
/* Mega panels */
.mega-panel { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(240,246,250,0.98); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-top: 1px solid rgba(2,38,63,0.08); border-bottom: 1px solid rgba(2,38,63,0.06); box-shadow: 0 24px 64px rgba(2,38,63,0.28); padding: 20px 40px 24px; animation: megaIn 0.2s ease; }
.mega-panel.show { display: block; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mega-cols { display: flex; gap: 26px; flex-wrap: wrap; max-width: 1160px; margin: 0 auto; justify-content: center; }
.mega-col { min-width: 140px; flex: 1; }
.col-label { font-family: 'Lato', sans-serif; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(2,38,63,0.12); }
.mega-link { display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(2,38,63,0.72); padding: 4px 0; cursor: pointer; transition: color 0.15s; line-height: 1.4; }
.mega-link .ti { font-size: 0.82rem; color: var(--airforce); flex-shrink: 0; }
.mega-link:hover { color: var(--prussian); }
.mega-link.primary { color: var(--prussian); font-weight: 700; margin-bottom: 4px; }
.mega-link.primary .ti { color: var(--airforce); }
.url-hint { font-size: 0.6rem; color: rgba(2,38,63,0.4); font-family: 'Lato', sans-serif; margin: 1px 0 4px 20px; }
.tag { display: inline-block; font-size: 0.6rem; font-weight: 900; background: var(--orange); color: #fff; padding: 1px 6px; border-radius: 20px; margin-left: 4px; letter-spacing: 0.04em; }
.mega-footer { margin: 14px auto 0; padding-top: 11px; border-top: 1px solid rgba(2,38,63,0.1); display: flex; gap: 20px; flex-wrap: wrap; max-width: 1160px; justify-content: center; }
.mega-footer-link { display: flex; align-items: center; gap: 6px; font-family: 'Lato', sans-serif; font-size: 0.74rem; font-weight: 700; color: var(--airforce); cursor: pointer; transition: color 0.15s; }
.mega-footer-link:hover { color: var(--prussian); }
.mega-divider { width: 1px; height: 14px; background: rgba(2,38,63,0.2); align-self: center; }
#panel-platform .mega-footer { justify-content: flex-end; }
#panel-platform .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-platform .mega-link { font-weight: 700; }
#panel-solutions .mega-link { font-weight: 700; }
#panel-solutions .mega-footer { justify-content: flex-end; }
#panel-solutions .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-company .mega-link { font-weight: 700; }
#panel-company .mega-footer { justify-content: flex-end; }
#panel-company .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-nd .mega-link { font-weight: 700; }
#panel-nd .mega-footer { justify-content: flex-end; }
#panel-nd .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-resources .mega-link { font-weight: 700; }
#panel-resources .mega-footer { justify-content: flex-end; }
#panel-resources .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-docs .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; max-width: 1180px; margin: 0 auto; }
#panel-docs .mega-link { font-weight: 700; }
#panel-docs .mega-link .ti { margin-top: 2px; align-self: flex-start; }
#panel-docs .mega-col:nth-child(5) { grid-column-start: 2; }
.search-panel { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999; background: rgba(2,38,63,0.97); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-top: 1px solid rgba(95,153,187,0.15); border-bottom: 1px solid rgba(95,153,187,0.1); box-shadow: 0 24px 64px rgba(0,0,0,0.55); padding: 24px 40px 28px; animation: megaIn 0.2s ease; }
.search-panel.show { display: block; }
.search-wrap { position: relative; }
.search-wrap .ti { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: rgba(95,153,187,0.6); }
.search-input { width: 100%; padding: 12px 16px 12px 42px; border-radius: 10px; border: 1px solid rgba(95,153,187,0.25); background: rgba(95,153,187,0.07); font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 400; color: #fff; outline: none; transition: border-color 0.2s; }
.search-input::placeholder { color: rgba(173,221,246,0.4); }
.search-input:focus { border-color: rgba(95,153,187,0.6); }
.search-hints { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.search-hint { font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(173,221,246,0.7); padding: 5px 14px; border-radius: 20px; background: rgba(95,153,187,0.1); border: 1px solid rgba(95,153,187,0.18); cursor: pointer; transition: all 0.15s; }
.search-hint:hover { background: rgba(95,153,187,0.2); color: #fff; }
.lang-panel { display: none; position: absolute; top: var(--nav-h); right: 40px; width: 480px; background: rgba(240,246,250,0.98); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgba(2,38,63,0.08); border-radius: 14px; box-shadow: 0 24px 64px rgba(2,38,63,0.28); padding: 20px; animation: megaIn 0.2s ease; }
.lang-panel.show { display: block; }
.lang-label { font-family: 'Lato', sans-serif; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(2,38,63,0.12); }
.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lang-opt { font-family: 'Lato', sans-serif; font-size: 0.88rem; font-weight: 400; color: rgba(2,38,63,0.72); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.lang-opt:hover { background: rgba(95,153,187,0.14); color: var(--prussian); }
.lang-opt.active { color: var(--prussian); font-weight: 700; background: rgba(95,153,187,0.18); }
/* Nav inline search */
.nav-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.nav-search-wrap .ti-search {
position: absolute;
left: 10px;
font-size: 0.82rem;
color: rgba(173,221,246,0.45);
pointer-events: none;
}
.nav-search-input {
width: 98px;
padding: 7px 10px 7px 27px;
border-radius: 30px;
border: 1px solid rgba(95,153,187,0.22);
background: rgba(95,153,187,0.07);
font-family: 'Lato', sans-serif;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
outline: none;
transition: width 0.25s ease, border-color 0.2s, background 0.2s;
}
.nav-search-input::placeholder { color: #F0F8FF; }
.nav-search-input:focus {
width: 240px;
border-color: rgba(95,153,187,0.55);
background: rgba(95,153,187,0.12);
}
/* ── LAYOUT ── */
.page-spacer { height: var(--nav-h); }
.hero-breadcrumb { position: absolute; top: calc(var(--nav-h) / 2 + 50px); left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; padding: 0 24px 0 40px; z-index: 900; display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: rgba(173,221,246,0.7); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.oversize-label { font-family: 'Lato', sans-serif; font-size: clamp(0.85rem,1.1vw,1rem); font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; display: block; }
.oversize-heading { font-family: 'Lato', sans-serif; font-size: clamp(58px,8.5vw,106px); font-weight: 900; line-height: 0.88; letter-spacing: -0.035em; color: #ffffff; margin-bottom: 32px; }
.oversize-heading em { font-style: italic; font-weight: 300; color: rgba(173,221,246,0.5); }
.fancy-word { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-style: italic; font-size: 1.18em; letter-spacing: -0.01em; }
.accent-orange { color: var(--orange); }
.accent-blue { color: var(--airforce); }
.section-sub { font-family: 'Lato', sans-serif; font-size: clamp(1rem,1.5vw,1.25rem); font-weight: 300; color: rgba(173,221,246,0.75); max-width: 560px; line-height: 1.7; margin-bottom: 60px; }
.zone-dark { padding: 100px 0; position: relative; background: var(--prussian); }
.zone-light { position: relative; padding: 100px 0; background: linear-gradient(135deg, #c8e6f5 0%, #d8eef8 40%, #c2e2f4 100%); }
/* section-transition scroll chevron, canonical: 16px, white on dark / prussian-blue on light */
.sec-chev { position: relative; height: 0; z-index: 5; pointer-events: none; color: rgba(2,38,63,0.45); }
.sec-chev.on-dark { color: rgba(255,255,255,0.6); }
.sec-chev.on-light { color: rgba(2,38,63,0.45); }
.sec-chev span { position: absolute; left: 50%; width: 16px; height: 16px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateX(-50%) rotate(45deg); animation: chevronPulseDown 1.6s ease-in-out infinite; }
.sec-chev span:nth-child(1) { top: -44px; }
.sec-chev span:nth-child(2) { top: -34px; animation-delay: 0.2s; }
:root[data-theme="dark"] .sec-chev.on-light { color: rgba(173,221,246,0.55); }
@keyframes chevronPulseDown { 0%,100% { opacity: 0.15; } 50% { opacity: 0.9; } }
.scroll-indicator { cursor: pointer; position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 2; }
.scroll-chevron { width: 22px; height: 22px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); opacity: 0.15; animation: chevronPulse 1.6s ease-in-out infinite; margin-top: -10px; }
.scroll-chevron:first-child { margin-top: 0; animation-delay: 0s; }
.scroll-chevron:nth-child(2) { animation-delay: 0.2s; }
.zone-dark .scroll-indicator { color: rgba(255,255,255,0.5); }
.zone-light .scroll-indicator { color: rgba(2,38,63,0.4); }
@keyframes chevronPulse { 0%,100% { opacity: 0.1; } 50% { opacity: 0.75; } }
/* ── HERO ── */
.hero-section { padding: 140px 0 120px; position: relative; overflow: hidden; background: var(--prussian); }
.hero-section .bg-img {width: 100%; height: 100%; max-width: none; object-fit: cover; position: absolute; inset: 0; object-fit: cover; object-position: center 30%; z-index: 0; }
.hero-section .bg-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(2,38,63,0.30) 0%, rgba(2,38,63,0.08) 55%, rgba(2,38,63,0.18) 100%); }
.hero-section > .container { position: relative; z-index: 2; }
/* Single column since the packages card came out: the copy keeps its
measure rather than stretching across the full hero width */
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-left { max-width: 680px; }
/* Hero CTA row */
.hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-cta-primary { padding: 14px 36px; border-radius: 30px; border: none; background: linear-gradient(130deg, #b83d1a 0%, var(--orange) 100%); box-shadow: 0 4px 18px rgba(230,83,43,0.35); font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; letter-spacing: 0.04em; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(230,83,43,0.55); }
.hero-cta-ghost { padding: 14px 36px; border-radius: 30px; border: 1.5px solid rgba(173,221,246,0.35); background: rgba(173,221,246,0.07); font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700; color: rgba(173,221,246,0.85); cursor: pointer; letter-spacing: 0.04em; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.hero-cta-ghost:hover { border-color: rgba(173,221,246,0.65); background: rgba(173,221,246,0.12); color: #fff; transform: translateY(-2px); }
/* ── INTRO / WHAT IS IT ── */
/* Brand gradient frame behind the platform intro, dark enough on its own
that the copy needs no wash over it */
#what-is-cloud, #benefits {
/* Blue wash over the gradient: darkens it a shade and pulls the
purple back toward the brand blues. Raise the alphas to go
darker/bluer, drop them to let more purple through.
Prussian stays underneath as the fallback, via .zone-dark. */
background-image:
linear-gradient(120deg, rgba(2,38,63,0.55) 0%, rgba(11,78,122,0.38) 50%, rgba(2,38,63,0.48) 100%),
url('images/cloud-website2.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.intro-text {}
/* Four lines, each carrying a different weight of voice: solid, light,
fancy, then the accent landing */
.intro-heading { font-family: 'Lato', sans-serif; font-size: clamp(2.2rem,4.5vw,5rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; color: #fff; margin-bottom: 28px; }
.intro-heading .h-light { display: block; font-weight: 300; color: rgba(255,255,255,0.92); letter-spacing: -0.02em; }
.intro-heading .h-fancy { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.12em; letter-spacing: -0.01em; color: var(--sky); }
.intro-heading .h-accent { display: block; color: var(--orange); }
.intro-body { font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 300; color: rgba(173,221,246,0.75); line-height: 1.75; margin-bottom: 20px; }
/* Two clean columns rather than a drift of pills. Icons match the ones
the nav mega-menu uses for the same modules, airforce and all. */
.module-line-intro { margin-bottom: 0; }
.module-line-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 20px; }
.module-line { display: flex; align-items: center; gap: 11px; padding: 11px 2px; font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 400; color: #ffffff; }
.module-line .ti { font-size: 0.95rem; color: var(--airforce); flex-shrink: 0; }
.stat-cards { display: flex; flex-direction: column; gap: 16px; }
/* Reversed out: light tiles on the dark frame, each opening with a full
block of its own accent colour that the icon sits on */
.stat-card {
--accent: var(--airforce);
background: rgba(255,255,255,0.94);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: none;
border-radius: 16px; overflow: hidden;
box-shadow: 0 14px 36px rgba(1,16,28,0.28);
display: flex; align-items: stretch;
transition: box-shadow 0.25s, background 0.25s, transform 0.25s;
}
/* --accent is the colour block, --ink the glyph and the figure */
.stat-card.c-sky { --accent: var(--sky); }
.stat-card.c-airforce { --accent: var(--airforce); }
.stat-card.c-prussian { --accent: var(--prussian); }
.stat-card.c-orange { --accent: var(--orange); }
.stat-card:hover { background: #fff; box-shadow: 0 22px 52px rgba(1,16,28,0.4); transform: translateX(4px); }
/* Full-height block of accent, with the circle centred on it */
.stat-icon {
width: 96px; flex-shrink: 0; background: var(--accent);
display: flex; align-items: center; justify-content: center;
}
.stat-icon .ti {
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,0.94);
color: var(--ink, var(--accent)); font-size: 1.3rem;
display: flex; align-items: center; justify-content: center;
}
.stat-content { padding: 24px 28px; }
.stat-number { font-family: 'Lato', sans-serif; font-size: 2rem; font-weight: 900; color: var(--ink, var(--accent)); line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; }
.stat-desc { font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 300; color: rgba(2,38,63,0.72); line-height: 1.5; }
/* Scroll-reveal, same convention as index.html */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }
/* The copy inside each tile rises a beat after the tile itself */
.stat-card .stat-number, .stat-card .stat-desc { opacity: 0; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.stat-card.in .stat-number, .stat-card.in .stat-desc { opacity: 1; transform: translateY(0); }
.stat-card.in .stat-number { transition-delay: calc(var(--d, 0s) + 0.18s); }
.stat-card.in .stat-desc { transition-delay: calc(var(--d, 0s) + 0.28s); }
.reveal-d1 { --d: 0.12s; }
.reveal-d2 { --d: 0.24s; }
.reveal-d3 { --d: 0.36s; }
@media (prefers-reduced-motion: reduce) {
.reveal, .stat-card .stat-number, .stat-card .stat-desc { opacity: 1; transform: none; transition: none; }
}
/* ── PACKAGES ── */
.packages-heading-block { text-align: center; margin-bottom: 60px; }
.packages-heading-block .oversize-label { display: block; text-align: center; }
.packages-section-title { font-family: 'Lato', sans-serif; font-size: clamp(2.2rem,4.5vw,5rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; color: var(--prussian); margin-bottom: 20px; }
.packages-section-title em { font-style: italic; font-weight: 300; color: rgba(95,153,187,0.7); }
.packages-section-sub { font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 300; color: rgba(2,38,63,0.65); max-width: 520px; margin: 0 auto; line-height: 1.7; }
.packages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
/* Column layout so the CTA can be pushed to the foot of the card: the
two buttons then line up however many modules each package lists */
.package-card { border-radius: 24px; padding: 48px 44px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.package-card:hover { transform: translateY(-6px); }
.package-card.starter { background: #fff; border: 1.5px solid rgba(2,38,63,0.1); box-shadow: 0 8px 40px rgba(2,38,63,0.08); }
.package-card.starter:hover { box-shadow: 0 20px 60px rgba(2,38,63,0.14); }
/* Framed on the purple side of the brand gradient, under a light
prussian wash so the module list keeps its contrast */
.package-card.pro {
background:
linear-gradient(150deg, rgba(2,38,63,0.58) 0%, rgba(2,38,63,0.32) 55%, rgba(2,38,63,0.52) 100%),
url('images/cloud-website2.png') 72% center / cover no-repeat,
var(--prussian);
border: 1.5px solid rgba(230,83,43,0.3);
box-shadow: 0 8px 40px rgba(230,83,43,0.15);
}
.package-card.pro:hover { box-shadow: 0 20px 60px rgba(230,83,43,0.25); }
.package-name { font-family: 'Lato', sans-serif; font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px; }
.package-card.starter .package-name { color: var(--prussian); }
.package-card.pro .package-name { color: #fff; }
/* Three lines reserved on both cards, so the divider and everything
under it starts on the same line whichever package you read */
.package-tagline { font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 300; line-height: 1.6; margin-bottom: 32px; min-height: 4.8em; }
.package-card.starter .package-tagline { color: rgba(2,38,63,0.65); }
.package-card.pro .package-tagline { color: rgba(173,221,246,0.7); }
.package-divider { height: 1px; margin-bottom: 28px; }
.package-card.starter .package-divider { background: rgba(2,38,63,0.1); }
.package-card.pro .package-divider { background: rgba(95,153,187,0.18); }
.users-block { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.users-option { flex: 1; min-width: 80px; padding: 12px 10px; border-radius: 10px; text-align: center; }
.package-card.starter .users-option { background: rgba(2,38,63,0.04); border: 1px solid rgba(2,38,63,0.1); }
.package-card.pro .users-option { background: rgba(95,153,187,0.1); border: 1px solid rgba(95,153,187,0.2); }
.users-num { font-family: 'Lato', sans-serif; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.02em; }
.package-card.starter .users-num { color: var(--prussian); }
.package-card.pro .users-num { color: var(--sky); }
.users-label { font-family: 'Lato', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.package-card.starter .users-label { color: rgba(2,38,63,0.45); }
.package-card.pro .users-label { color: rgba(173,221,246,0.5); }
.package-section-label { font-family: 'Lato', sans-serif; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; margin-top: 24px; }
.package-card.starter .package-section-label { color: rgba(2,38,63,0.4); }
.package-card.pro .package-section-label { color: rgba(173,221,246,0.4); }
.module-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.module-row { display: flex; align-items: center; gap: 10px; }
.module-row .ti { font-size: 0.9rem; flex-shrink: 0; }
.package-card.starter .module-row .ti { color: var(--orange); }
.package-card.pro .module-row .ti { color: var(--orange); }
.module-name { font-family: 'Lato', sans-serif; font-size: 0.88rem; font-weight: 400; }
.package-card.starter .module-name { color: rgba(2,38,63,0.8); }
.package-card.pro .module-name { color: rgba(173,221,246,0.85); }
.module-extra-note { font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 300; font-style: italic; margin-top: 4px; }
.package-card.starter .module-extra-note { color: rgba(2,38,63,0.45); }
.package-card.pro .module-extra-note { color: rgba(173,221,246,0.45); }
/* auto top margin drops the foot to the bottom of the card; the padding
keeps a minimum breathing gap on the taller of the two */
.package-foot { margin-top: auto; padding-top: 36px; }
.package-cta { width: 100%; padding: 16px 32px; border-radius: 12px; border: none; font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.package-card.starter .package-cta { background: var(--prussian); color: #fff; box-shadow: 0 4px 20px rgba(2,38,63,0.2); }
.package-card.starter .package-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(2,38,63,0.3); }
.package-card.pro .package-cta { background: linear-gradient(130deg, #b83d1a 0%, var(--orange) 100%); color: #fff; box-shadow: 0 4px 20px rgba(230,83,43,0.3); }
.package-card.pro .package-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(230,83,43,0.5); }
.pro-corner-label { position: absolute; top: 22px; right: 22px; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); background: rgba(230,83,43,0.12); border: 1px solid rgba(230,83,43,0.35); padding: 4px 12px; border-radius: 20px; }
/* ── THREE PILLARS CAROUSEL ── */
.benefits-intro { max-width: 640px; margin-bottom: 56px; }
.benefits-intro h2 { font-family: 'Lato', sans-serif; font-size: clamp(2.2rem,4.5vw,5rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; color: #fff; margin-bottom: 24px; }
.benefits-intro h2 em { font-style: italic; font-weight: 300; color: rgba(173,221,246,0.5); }
.benefits-intro p { font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 300; color: rgba(173,221,246,0.7); line-height: 1.75; }
/* One slide visible at a time, copy left and the pillar mark right */
.pillars { position: relative; }
/* Slides share one grid cell, so the stage is as tall as the longest
pillar and never jumps as you page through */
.pillar-stage { display: grid; }
.pillar-slide {
grid-area: 1 / 1;
/* Copy pinned to the top of the stage: a shorter pillar leaves space
at the bottom rather than sliding its heading down the page */
display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start;
opacity: 0; visibility: hidden; transform: translateY(14px);
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
.pillar-slide.active { opacity: 1; visibility: visible; transform: none; }
.pillar-title { font-family: 'Lato', sans-serif; font-size: clamp(1.9rem,3vw,3rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; color: var(--orange); margin-bottom: 10px; }
.pillar-title em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.15em; color: var(--sky); }
.pillar-for { font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--sky); margin-bottom: 44px; }
.pillar-lead { font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 26px; max-width: 560px; }
/* Tick marks as real elements rather than a ::before codepoint, so the
self-hosted webfont can never silently drop them */
.pillar-list { list-style: none; display: grid; gap: 12px; }
.pillar-list li {
display: flex; gap: 12px; align-items: flex-start;
font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 300;
color: rgba(255,255,255,0.82); line-height: 1.55;
}
.pillar-list li .ti { flex-shrink: 0; font-size: 1rem; color: var(--orange); margin-top: 2px; }
/* Photo panel, self-centred in the full-height stage so it holds one
position across all three pillars however long the list is. The
source shots are 16:9, so they are cropped to 4:3 and each one is
framed on its own subject via object-position below. */
.pillar-mark {
align-self: center; position: relative; isolation: isolate;
width: 100%; aspect-ratio: 4 / 3;
border-radius: 20px; overflow: hidden;
border: 1px solid rgba(173,221,246,0.18);
box-shadow: 0 20px 48px rgba(1,16,28,0.42);
}
/* Rotates the backdrop off mint and into the cool blues without
flattening the picture: the lavender side stays violet and the skin
tones only warm a touch. Raise the angle to push further off green. */
.pillar-photo {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: hue-rotate(15deg) saturate(0.95);
}
/* Sinks the bottom edge into the section rather than cutting it off */
.pillar-mark::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(0deg, rgba(2,38,63,0.55) 0%, rgba(2,38,63,0) 42%);
}
#pillar-0 .pillar-photo { object-position: 62% 50%; }
#pillar-1 .pillar-photo { object-position: 55% 50%; }
#pillar-2 .pillar-photo { object-position: 48% 50%; }
/* Heineken-style rail: one thin bar per pillar, active one filled */
.pillar-nav { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; }
.pillar-bars { display: flex; gap: 18px; flex: 1; }
.pillar-bar { flex: 1; height: 3px; border: none; padding: 0; background: rgba(173,221,246,0.18); border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; transition: background 0.2s; }
.pillar-bar:hover { background: rgba(173,221,246,0.32); }
.pillar-bar::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--orange); border-radius: 2px; transition: width 0.45s ease; }
.pillar-bar.active::after { width: 100%; }
.pillar-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.pillar-arrow {
width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid rgba(173,221,246,0.3); background: transparent;
color: rgba(173,221,246,0.85); font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pillar-arrow:hover { border-color: var(--orange); background: rgba(230,83,43,0.12); color: #fff; }
/* ── TESTIMONIALS ── ported from customers.html so the page closes the
same way the customer stories page does */
.quotes-zone { position: relative; isolation: isolate; background: var(--prussian); padding: 72px 0 80px; }
/* Same frame as the hero, running in its original orientation. The
picture carries this zone, so it runs at full strength with a touch
of saturation and contrast rather than under a colour wash. */
.quotes-bg {
position: absolute; inset: 0; z-index: 0;
background: url('images/cloud-network-inventory-saas.webp') center 30% / cover no-repeat;
filter: saturate(1.08) contrast(1.06);
}
/* Only shading left: a soft top-left pool so the heading keeps its
footing. The rest of the frame is left alone. */
.quotes-zone::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background: radial-gradient(120% 90% at 18% 12%, rgba(2,38,63,0.55) 0%, rgba(2,38,63,0.22) 45%, rgba(2,38,63,0) 75%);
}
.quotes-zone > .container { position: relative; z-index: 3; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.q-card {
background: rgba(255,255,255,0.04); border-radius: 18px; padding: 32px 30px 28px;
border: 1px solid rgba(95,153,187,0.14);
display: flex; flex-direction: column; gap: 14px;
transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.q-card:hover { transform: translateY(-4px); border-color: rgba(95,153,187,0.38); background: rgba(255,255,255,0.06); }
.q-mark {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700; font-style: normal;
font-size: 5rem; line-height: 1;
color: var(--sky);
text-shadow: 0 8px 32px rgba(173,221,246,0.35);
margin: -6px 0 -34px; pointer-events: none;
}
.q-text {
font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300;
font-size: 1.22rem; color: #ffffff; line-height: 1.55;
}
.q-author {
margin-top: auto; padding-top: 16px;
border-top: 1px solid rgba(95,153,187,0.2);
display: flex; align-items: center; gap: 12px;
}
.q-name {
font-size: 0.86rem; font-weight: 900; letter-spacing: 0.04em;
color: rgba(173,221,246,0.9);
}
/* Reversed out: light cards on the dark photo, so the quotes carry */
.quotes-zone .q-card {
background: rgba(255,255,255,0.94);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-color: rgba(2,38,63,0.08);
box-shadow: 0 16px 40px rgba(2,20,35,0.3);
}
.quotes-zone .q-card:hover {
background: #ffffff; border-color: rgba(95,153,187,0.5);
box-shadow: 0 24px 56px rgba(2,20,35,0.42);
}
.quotes-zone .q-mark { color: var(--airforce); text-shadow: none; }
/* Cormorant is self-hosted at 300 only, so thicken the real outline
rather than let the browser fake a heavier weight */
.quotes-zone .q-text {
color: var(--prussian);
-webkit-text-stroke: 0.4px currentColor;
paint-order: stroke fill;
}
.quotes-zone .q-author { border-top-color: rgba(2,38,63,0.12); }
.quotes-zone .q-name { color: var(--prussian); }
.quotes-heading { font-family: 'Lato', sans-serif; font-size: clamp(3rem,7vw,7rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; color: #ffffff; margin-bottom: 40px; }
/* Same trick as .fancy-word: Cormorant has no bold weight on this box */
.quotes-heading em {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-weight: 300; font-size: 1.15em;
-webkit-text-stroke: 0.021em currentColor;
paint-order: stroke fill;
}
/* ── CLOSING CTA BAND ──
The same brand gradient frame as the platform intro, so the page
opens and closes on the same ground. The vignette rides on top: a
soft airforce lift behind the card, darkening to the edges so the
band hands off to the footer (#011628) without a seam. */
.cta-band {
background:
radial-gradient(100% 78% at 50% 42%,
rgba(95,153,187,0.18) 0%,
rgba(95,153,187,0.05) 42%,
rgba(1,16,28,0.35) 78%,
rgba(1,16,28,0.6) 100%),
url('images/cloud-website2.png') center / cover no-repeat,
#021F35;
padding: 48px 0 72px;
}
/* No dark-theme override needed: the band is dark in both themes */
.newsletter-strip {
margin: 48px 0;
border-radius: 18px;
position: relative;
overflow: hidden;
padding: 52px 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.newsletter-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: url('images/service2create-network-inventory-platform.webp');
background-size: cover;
background-position: center 45%;
/* Mirrored, so this strip and the info sheet block above it read as
two different frames of the same artwork */
transform: scaleX(-1);
}
/* Wash only where the copy sits: it clears by two thirds across, so the
purples and oranges on the right run at full strength */
.newsletter-strip::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(2,38,63,0.68) 0%, rgba(2,38,63,0.34) 36%, rgba(2,38,63,0.06) 64%, rgba(2,38,63,0) 100%);
}
.newsletter-strip > * { position: relative; z-index: 1; }
.newsletter-label {
font-family: 'Lato', sans-serif;
font-size: clamp(0.65rem, 1.1vw, 0.85rem);
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--orange);
display: block;
margin-bottom: 12px;
}
.newsletter-heading {
font-family: 'Lato', sans-serif;
font-size: clamp(2.2rem, 5vw, 4.5rem);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.03em;
color: #fff;
margin-bottom: 16px;
}
.newsletter-heading em {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: 1.15em;
}
.newsletter-sub {
font-size: 0.9rem;
font-weight: 300;
color: #ffffff;
line-height: 1.6;
max-width: 420px;
}
.newsletter-form {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
.newsletter-input {
padding: 12px 22px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
outline: none;
width: 260px;
transition: border-color 0.2s, background 0.2s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.18); }
.newsletter-submit {
padding: 12px 28px;
border-radius: 30px;
border: none;
background: linear-gradient(130deg, #b83d1a 0%, var(--orange) 100%);
box-shadow: 0 4px 18px rgba(230,83,43,0.35);
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
cursor: pointer;
letter-spacing: 0.03em;
transition: all 0.2s;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 8px;
}
.newsletter-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(230,83,43,0.55); }
/* The chevron glyph rides high against the cap height of the label, so
it gets nudged onto the text's optical centre. The strip buttons run
a smaller label, where flexbox already centres it, so they sit put. */
.hero-cta-primary .ti,
.hero-cta-ghost .ti,
.package-cta .ti { position: relative; top: 2px; }
/* ── INFO SHEET REQUEST ──
Same strip as the closing CTA, sitting under the package cards where
the two download links used to be. Two fields, so the form wraps onto
its own line rather than stretching the strip. */
.infosheet-strip { margin: 56px 0 0; }
/* Same artwork as the closing strip but unmirrored and framed a little
higher, so the two blocks are not the same picture twice */
.infosheet-strip::before {
background-position: center 40%;
transform: none;
}
/* Pitch and form share the left column, the brochure sits alongside:
three columns across would not fit the strip */
.infosheet-strip .newsletter-left { max-width: 560px; }
/* Shrinks rather than overflows between the desktop and stacked layouts */
.infosheet-art {
width: 460px; max-width: 100%; min-width: 240px; height: auto;
filter: drop-shadow(0 18px 40px rgba(1,16,28,0.55));
}
/* Email full width on top, then name and the send button side by side */
.infosheet-strip .newsletter-form { flex-wrap: wrap; max-width: 470px; margin-top: 26px; }
.infosheet-strip .if-email { width: 100%; }
.infosheet-strip .if-name { flex: 1 1 170px; width: auto; min-width: 0; }
.infosheet-strip .newsletter-submit { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Live HubSpot form replaces the mock fields; it renders in an iframe,
so its look is set from the embed script at the foot of the page */
.infosheet-strip .hs-form-slot { max-width: 470px; margin-top: 26px; }
/* -- Full footer -- */
.site-footer-full {
background: #011628;
font-family: 'Lato', sans-serif;
position: relative;
z-index: 1;
}
.footer-top {
padding: 72px 0 56px;
border-top: 1px solid rgba(95,153,187,0.15);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(5, 1fr);
gap: 40px;
}
.footer-logo { height: 36px; width: auto; margin-bottom: 12px; }
.footer-logo-s2c { height: 12px; width: auto; margin-bottom: 20px; display: block; }
.footer-tagline {
font-size: 0.82rem;
font-weight: 300;
color: rgba(255,255,255,0.92);
line-height: 1.7;
margin-bottom: 20px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
}
.footer-contact a {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
font-weight: 400;
color: rgba(255,255,255,0.92);
transition: color 0.18s;
}
.footer-contact a:hover { color: #f0f8ff; }
.footer-contact a .ti { font-size: 0.85rem; color: #ffffff; flex-shrink: 0; }
.footer-social {
display: flex;
gap: 10px;
}
.social-icon-btn {
width: 36px; height: 36px;
border-radius: 8px;
border: 1px solid rgba(240,248,255,0.2);
background: rgba(240,248,255,0.05);
display: flex; align-items: center; justify-content: center;
color: #ffffff;
font-size: 1rem;
transition: all 0.18s;
cursor: pointer;
}
.social-icon-btn:hover {
background: rgba(240,248,255,0.14);
border-color: rgba(240,248,255,0.5);
color: #fff;
}
.footer-login-btn {
display: inline-flex; align-items: center;
margin-top: 12px; padding: 8px 20px;
border-radius: 30px;
border: 1px solid rgba(95,153,187,0.22);
background: rgba(95,153,187,0.07);
font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
color: #fff; letter-spacing: 0.04em; cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.footer-login-btn:hover { background: rgba(95,153,187,0.14); border-color: rgba(95,153,187,0.45); }
.footer-col-heading {
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 14px;
margin-top: 0;
}
.footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-col ul li a {
font-size: 0.85rem;
font-weight: 300;
color: rgba(255,255,255,0.92);
transition: color 0.18s;
line-height: 1.4;
}
.footer-col ul li a:hover { color: #fff; }
.footer-creds .container {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: 14px 36px; padding-top: 26px; padding-bottom: 26px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-cred {
display: inline-flex; align-items: center; gap: 9px;
font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 400;
letter-spacing: 0.05em; color: rgba(255,255,255,0.7);
}
.footer-cred .ti { font-size: 1.05rem; color: var(--orange); }
.footer-bottom {
border-top: 1px solid rgba(95,153,187,0.1);
padding: 20px 0;
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy {
font-size: 0.78rem;
font-weight: 400;
color: rgba(255,255,255,0.7);
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.7);
transition: color 0.2s;
}
.footer-legal a:hover { color: #f0f8ff; }
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
}
@media (max-width: 680px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-top { padding: 48px 0 40px; }
}
@media (max-width: 420px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
.nav-bar .nav-item, .nav-right .lang-btn, .nav-right .cta-btn { display: none; }
.nav-mobile-toggle { display: flex; }
.intro-grid { grid-template-columns: 1fr; gap: 48px; }
.packages-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
.pillar-slide { gap: 40px; }
.quote-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
/* The mark drops out rather than shrink to a smudge beside the copy */
.pillar-slide { grid-template-columns: 1fr; }
.pillar-mark { display: none; }
.quote-grid { grid-template-columns: 1fr; }
.newsletter-strip { flex-direction: column; gap: 28px; padding: 40px 32px; }
.newsletter-form { flex-direction: column; width: 100%; }
.newsletter-input { width: 100%; }
.infosheet-strip .if-name { flex: 0 0 auto; width: 100%; }
.newsletter-submit { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
.hero-section { padding: 80px 0 60px; }
.zone-dark, .zone-light { padding: 64px 0; }
.packages-grid { max-width: none; }
.package-card { padding: 32px 28px; }
.pillar-nav { gap: 16px; }
.pillar-bars { gap: 10px; }
}
@media (max-width: 420px) {
}
/* ══════════════════════════════════════════════════════════
BRANDED CURSOR: gradient orange disc (matches "Book a Demo"
button) with white double-chevron; reverses out on clickables.
Transparent outside the disc. Static, CSS-only, real-mouse only.
══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
body {
cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f0824f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23E6532B%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-60%25%27%20y%3D%27-60%25%27%20width%3D%27220%25%27%20height%3D%27220%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.6%27%20stdDeviation%3D%272%27%20flood-color%3D%27%2302263F%27%20flood-opacity%3D%270.4%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2715%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23s%29%27%2F%3E%3Cg%20transform%3D%27translate%2820%2020%29%20rotate%2845%29%20scale%280.78%29%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-1.5%20-6L-7.5%200L-1.5%206%27%2F%3E%3Cpath%20d%3D%27M7.5%20-6L1.5%200L7.5%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, auto !important;
}
a, button, summary, label[for], [onclick], [role="button"],
.op-card, .uc-card, .pillar-card, .resource-card, .industry-card,
.film-card, .module-card, .ind-chip, .q-card,
.nav-item, .lang-btn, .icon-btn, .cta-btn, .cta-btn-secondary,
.hero-cta-main, .hero-cta-ghost, .mega-link, .mega-footer-link,
.faq-q, .show-tab, .spot-dot, .lang-opt, .search-hint,
.footer-login-btn, .social-icon-btn, .nav-mobile-toggle,
input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"], select {
cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23eaf2f8%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-60%25%27%20y%3D%27-60%25%27%20width%3D%27220%25%27%20height%3D%27220%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.6%27%20stdDeviation%3D%272%27%20flood-color%3D%27%2302263F%27%20flood-opacity%3D%270.4%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2715%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23s%29%27%2F%3E%3Cg%20transform%3D%27translate%2820%2020%29%20rotate%2845%29%20scale%280.78%29%27%20fill%3D%27none%27%20stroke%3D%27%23E6532B%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-1.5%20-6L-7.5%200L-1.5%206%27%2F%3E%3Cpath%20d%3D%27M7.5%20-6L1.5%200L7.5%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, pointer !important;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="url"], textarea, [contenteditable="true"] {
cursor: text !important;
}
}
/* ══════════════════════════════════════════════════════════
NOTEPAD WIDGET: persistent note-taking pop-up
══════════════════════════════════════════════════════════ */
.np-fab {
position: fixed; right: 24px; bottom: 24px; z-index: 1200;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 13px; border: none; border-radius: 30px;
background: var(--orange);
color: #fff; font-family: 'Lato', sans-serif; font-weight: 700;
font-size: 0.72rem; letter-spacing: 0.03em; cursor: pointer;
box-shadow: 0 5px 18px rgba(230,83,43,0.4);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.np-fab:hover { background: #b83d1a; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(230,83,43,0.55); }
.np-fab .ti { font-size: 0.95rem; }
.np-fab .np-badge {
min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
background: #fff; color: var(--orange); font-size: 0.58rem; font-weight: 900;
display: none; align-items: center; justify-content: center;
}
.np-fab .np-badge.show { display: inline-flex; }
.np-hidden { display: none !important; }
/* music + Notes dock (Notes stays in the corner, music sits to its left) */
.fab-dock { position: fixed; right: 24px; bottom: 24px; z-index: 1200; display: flex; align-items: center; gap: 12px; }
.fab-dock .np-fab { position: static; right: auto; bottom: auto; z-index: auto; }
.music-wrap { position: relative; display: inline-flex; }
.music-fab {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
background: var(--prussian); backdrop-filter: blur(10px);
color: #fff; cursor: pointer;
box-shadow: 0 5px 18px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(95,153,187,0.3);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.music-fab:hover { transform: translateY(-2px); background: #013a5f; box-shadow: 0 12px 30px rgba(2,38,63,0.45), inset 0 0 0 1px rgba(95,153,187,0.5); }
/* volume / mute popover */
.music-pop {
position: absolute; bottom: calc(100% + 10px); right: 0;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 24px;
background: rgba(2,38,63,0.72); backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(95,153,187,0.35);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s; white-space: nowrap;
}
.music-wrap:hover .music-pop, .music-wrap:focus-within .music-pop { opacity: 1; visibility: visible; transform: none; }
.music-mute { background: none; border: none; padding: 0; cursor: pointer; color: var(--sky); display: inline-flex; }
.music-mute .ti { font-size: 1.15rem; }
.music-vol { -webkit-appearance: none; appearance: none; width: 96px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.28); outline: none; cursor: pointer; }
.music-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; }
.music-vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; }
.music-fab .m-icon .ti { font-size: 1rem; color: var(--airforce); display: block; }
.music-fab.playing .m-icon { display: none; }
.music-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.music-fab.playing .music-eq { display: inline-flex; }
.music-eq i { width: 3px; background: var(--orange); border-radius: 2px; transform-origin: bottom; animation: eqBar 0.9s ease-in-out infinite; }
.music-eq i:nth-child(1) { height: 7px; animation-delay: 0s; }
.music-eq i:nth-child(2) { height: 14px; animation-delay: 0.22s; }
.music-eq i:nth-child(3) { height: 9px; animation-delay: 0.44s; }
@keyframes eqBar { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .music-fab { transition: none; } .music-eq i { animation: none; } }
.np-panel {
position: fixed; right: 24px; bottom: 24px; z-index: 1201;
width: min(360px, calc(100vw - 32px));
max-height: min(560px, calc(100vh - 48px));
display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
background: rgba(255,255,255,0.98);
border: 1px solid rgba(2,38,63,0.12);
box-shadow: 0 30px 80px rgba(2,38,63,0.35);
font-family: 'Lato', sans-serif;
transform-origin: bottom right;
animation: npIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes npIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .np-panel { animation: none; } .np-fab { transition: none; } }
.np-head {
display: flex; align-items: center; gap: 10px; padding: 14px 16px;
background: linear-gradient(130deg, #02263F, #012743); color: #fff;
}
.np-head .np-avatar {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
background: linear-gradient(135deg, var(--orange), #b83d1a);
display: flex; align-items: center; justify-content: center;
font-size: 1rem; box-shadow: 0 4px 12px rgba(230,83,43,0.4);
}
.np-head h4 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 900; letter-spacing: 0.01em; }
.np-head p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sky); }
.np-head .np-ctrls { margin-left: auto; display: flex; gap: 4px; }
.np-iconbtn {
width: 30px; height: 30px; border: none; background: rgba(255,255,255,0.1);
border-radius: 8px; color: #fff; font-size: 1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background 0.18s;
}
.np-iconbtn:hover { background: rgba(255,255,255,0.22); }
.np-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.np-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; color: var(--orange); opacity: 0; transition: opacity 0.3s; }
.np-status.show { opacity: 1; }
.np-textarea {
width: 100%; min-height: 110px; height: 130px; resize: vertical;
border: 1px solid rgba(2,38,63,0.14); border-radius: 12px; padding: 12px 14px;
font-family: 'Lato', sans-serif; font-size: 0.9rem; line-height: 1.6;
color: var(--dark-grey); outline: none; transition: border-color 0.2s; background: #fff;
}
.np-textarea:focus { border-color: var(--airforce); }
.np-textarea::placeholder { color: rgba(56,72,79,0.45); }
.np-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(2,38,63,0.1); background: var(--alice); }
.np-foot-row { display: flex; gap: 8px; }
.np-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(2,38,63,0.14);
background: #fff; color: var(--prussian); font-family: 'Lato', sans-serif;
font-weight: 700; font-size: 0.8125rem; cursor: pointer; transition: all 0.18s;
}
.np-btn:hover { border-color: rgba(2,38,63,0.3); }
.np-btn.primary { border: none; background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(230,83,43,0.4); }
.np-btn.primary:hover { background: #b83d1a; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(230,83,43,0.55); }
.np-btn .ti { font-size: 0.95rem; }
.np-btn.np-clear { flex: 0 0 auto; width: 42px; color: var(--dark-grey); }
.np-btn.np-clear:hover { border-color: rgba(230,83,43,0.45); color: var(--orange); }
.np-toast {
position: fixed; right: 24px; bottom: 92px; z-index: 1202;
background: var(--prussian); color: #fff; font-family: 'Lato', sans-serif;
font-size: 0.8125rem; font-weight: 700; padding: 10px 16px; border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none;
}
.np-toast.show { opacity: 1; transform: none; }
@media (max-width: 600px) { .np-panel, .fab-dock { right: 12px; bottom: 12px; } .np-toast { right: 12px; } }
.theme-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 29px; height: 29px; padding: 0;
border-radius: 50%; border: 1px solid rgba(95,153,187,0.25); background: none;
color: #fff; cursor: pointer; transition: all 0.18s;
}
.theme-btn:hover { background: rgba(95,153,187,0.12); border-color: rgba(95,153,187,0.45); }
.theme-btn .ti { font-size: 0.9rem; }
.theme-btn .m-sun { display: none; }
:root[data-theme="dark"] .theme-btn .m-moon { display: none; }
:root[data-theme="dark"] .theme-btn .m-sun { display: inline-block; color: var(--yellow); }
/* ── DARK MODE (page body) ── */
:root[data-theme="dark"] .zone-light { background: #05233a; }
:root[data-theme="dark"] .zone-light .scroll-indicator { color: rgba(173,221,246,0.5); }
:root[data-theme="dark"] .packages-section-title { color: #e9f3fb; }
:root[data-theme="dark"] .packages-section-title em { color: rgba(95,153,187,0.85); }
:root[data-theme="dark"] .packages-section-sub { color: #bcd6ea; }
:root[data-theme="dark"] .package-card.starter { background: rgba(95,153,187,0.08); border-color: rgba(95,153,187,0.22); box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
:root[data-theme="dark"] .package-card.starter :is(.package-name,.users-num) { color: #e9f3fb; }
:root[data-theme="dark"] .package-card.starter :is(.package-tagline,.module-name) { color: #bcd6ea; }
:root[data-theme="dark"] .package-card.starter .package-divider { background: rgba(95,153,187,0.18); }
:root[data-theme="dark"] .package-card.starter .users-option { background: rgba(95,153,187,0.1); border-color: rgba(95,153,187,0.2); }
:root[data-theme="dark"] .package-card.starter :is(.users-label,.package-section-label,.module-extra-note) { color: rgba(173,221,246,0.5); }
:root[data-theme="dark"] .package-card.starter .package-cta { background: var(--sky); color: var(--prussian); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }