/* ─────────────────────────────────────────────────────────────────
DESIGN SYSTEM — OCGT "Point Cloud Intelligence"
Dark/Light theme with teal brand accents
───────────────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
/* Core — DARK THEME (Direction B — "Graphite & Cream" — 2025 Linear/Vercel register)
Pure warm graphite surfaces, warm off-white text, mint as the ONE signature color. */
--bg: #101113; /* Base — pure warm graphite, zero brown */
--bg1: #1A1B1D; /* Elevated surface (cards) */
--bg2: #24252A; /* Section breaks */
--bg3: #313337; /* Idle borders (solid) */
--bg-card: rgba(244,241,234,.028);
--bg-nav: rgba(16,17,19,.88);
/* Logo gradient — reserved for hero statement moments only.
Full 3-stop still available via --grad (legacy compat).
Preferred new 2-stop for hero is --grad-statement. */
--g-start: #5def95;
--g-mid: #3FB4C3;
--g-end: #2684E9;
--grad: linear-gradient(135deg, #5def95 0%, #3FB4C3 50%, #2684E9 100%);
--grad-statement: linear-gradient(135deg, #5def95 0%, #2684E9 100%);
/* Brand — ONE signature color owns every CTA/active state */
--mint: #5def95; /* THE OCGT color */
--teal: #3FB4C3; /* supporting only */
--blue: #2684E9; /* supporting only */
--red: #FF5A3A; /* signal / manifesto strike — hot ember, not medical */
/* Legacy aliases (kept so existing CSS doesn't break) */
--green: #5def95;
--cyan: #2684E9;
--yellow: #5def95; /* was amber; now routed to mint so CTAs unify */
--yellow-d: #3FB4C3;
/* Semi-transparent overlays */
--brand-bg: rgba(63,180,195, 0.08);
--brand-bg-hover: rgba(63,180,195, 0.14);
--accent-bg: rgba(63,180,195, 0.08);
--earth-bg: rgba(255,90,58, 0.08);
--error-bg: rgba(255,90,58, 0.08);
--warning-bg: rgba(63,180,195, 0.08);
--success-bg: rgba(63,180,195, 0.10);
/* Text — warm off-white (not pure white — saves contrast budget on OLED) */
--text: #F4F1EA; /* primary */
--muted: #A8A49A; /* reads premium */
--dim: #6E6B64; /* tertiary */
/* Borders — warm off-white at low opacity ("blueprint" / Vercel stroke feel)
No cyan tint — reads as software, not marketing */
--b: rgba(244,241,234,.08); /* idle 1px stroke */
--b2: rgba(244,241,234,.14); /* hover */
--b3: rgba(244,241,234,.22); /* emphasis */
--b-mint: rgba(63,180,195,.35); /* active state */
/* Theme-aware overrides */
--hero-overlay: rgba(16,17,19,.72);
--card-shadow: rgba(0,0,0,.4);
--overlay-heavy: rgba(16,17,19,.93);
--overlay-medium: rgba(16,17,19,.82);
--overlay-light: rgba(16,17,19,.55);
--grain-opacity: .022;
--canvas-display: block;
--logo-filter: none;
color-scheme: dark;
}
/* ── LIGHT THEME ── (Direction B — "Graphite & Cream" light mode)
Kept the warm-paper cream base — unified design language dark ↔ light. */
[data-theme="light"] {
--bg: #F4F1EA; /* Warm cream/paper base */
--bg1: #FFFFFF; /* Elevated cards */
--bg2: #EEEAE0; /* Subtle cream surfaces */
--bg3: #E4DFD2; /* Warm tan borders */
--bg-card: #FFFFFF;
--bg-nav: rgba(244,241,234,.92);
/* Brand — darkened mint for WCAG AA contrast on light bg */
--mint: #22C65F; /* mint, darkened for ~5:1 on cream */
--teal: #2a9d8f;
--blue: #1E6BD6;
--red: #D7432A;
/* Legacy aliases */
--green: #22C65F;
--cyan: #1E6BD6;
--yellow: #22C65F;
--yellow-d: #2a9d8f;
--grad: linear-gradient(135deg, #22C65F 0%, #2a9d8f 50%, #1E6BD6 100%);
--grad-statement: linear-gradient(135deg, #22C65F 0%, #1E6BD6 100%);
--brand-bg: rgba(34,198,95, 0.08);
--brand-bg-hover: rgba(34,198,95, 0.14);
--accent-bg: rgba(42,157,143, 0.08);
--earth-bg: rgba(215,67,42, 0.08);
--error-bg: rgba(215,67,42, 0.08);
--warning-bg: rgba(34,198,95, 0.08);
--success-bg: rgba(34,198,95, 0.10);
/* Text — warm near-black, not pure black (feels editorial) */
--text: #14161A;
--muted: #5A5750;
--dim: #8C8882;
/* Borders — low-opacity warm-near-black for the "blueprint" stroke feel */
--b: rgba(20,22,26,.08);
--b2: rgba(20,22,26,.14);
--b3: rgba(20,22,26,.22);
--b-mint: rgba(34,198,95,.35);
--hero-overlay: rgba(20,22,26,.42);
--card-shadow: rgba(20,22,26,.08);
--overlay-heavy: rgba(244,241,234,.95);
--overlay-medium: rgba(244,241,234,.88);
--overlay-light: rgba(244,241,234,.55);
--grain-opacity: .012;
--canvas-display: none;
--logo-filter: brightness(0) saturate(100%);
color-scheme: light;
}
:root {
/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3.25rem;
/* Spacing scale */
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
/* Sizes */
--nav-h: 80px;
--r: 12px;
--r-sm: 8px;
--r-lg: 16px;
--r-pill: 999px;
/* Transitions */
--t: .2s ease;
--t-slow: .35s ease;
/* Fonts — Geist (Vercel) primary with Source Sans 3 fallback */
--f-head: 'Geist', 'Source Sans 3', 'Inter Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-body: 'Geist', 'DM Sans', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
--f-italic: 'Fraunces', Georgia, 'Times New Roman', serif; /* reserved for manifesto moments */
}
/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
/* ─── EXIT-INTENT MODAL ───────────────────────────────── */
.exit-modal {
position:fixed; inset:0;
z-index:10000;
display:none;
align-items:center; justify-content:center;
padding:1.5rem;
opacity:0;
transition:opacity .35s cubic-bezier(.22,1,.36,1);
}
.exit-modal.is-open {
display:flex;
opacity:1;
}
.exit-modal-backdrop {
position:absolute; inset:0;
background:rgba(4,3,2,.75);
backdrop-filter:blur(16px) saturate(120%);
-webkit-backdrop-filter:blur(16px) saturate(120%);
cursor:pointer;
}
.exit-modal-card {
position:relative; z-index:2;
width:min(520px, 100%);
background:var(--bg1);
border-radius:22px;
padding:clamp(1.75rem, 3vw, 2.5rem);
border:1px solid rgba(248,248,224,.1);
border-top:1px solid rgba(93,239,149,.28);
box-shadow:0 40px 100px rgba(0,0,0,.65), 0 0 80px rgba(93,239,149,.15), inset 0 1px 0 rgba(255,255,255,.08);
transform:translateY(16px) scale(.97);
opacity:0;
transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.exit-modal.is-open .exit-modal-card {
transform:translateY(0) scale(1);
opacity:1;
}
.exit-modal-card::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit; padding:1px;
background:linear-gradient(140deg, rgba(93,239,149,.45) 0%, rgba(63,180,195,.3) 50%, rgba(38,132,233,.15) 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none;
opacity:.7;
}
.exit-modal-close {
position:absolute;
top:.85rem; right:.85rem;
width:34px; height:34px;
border-radius:50%;
background:rgba(248,248,224,.05);
border:1px solid rgba(248,248,224,.1);
color:rgba(248,248,224,.65);
cursor:pointer;
display:flex; align-items:center; justify-content:center;
padding:0;
transition:background .25s, color .25s, border-color .25s;
}
.exit-modal-close:hover, .exit-modal-close:focus-visible {
background:rgba(248,248,224,.12);
color:var(--text);
border-color:rgba(248,248,224,.25);
outline:none;
}
.exit-modal-close svg { width:16px; height:16px; }
.exit-modal-badge {
display:inline-flex; align-items:center; gap:.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.64rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color:rgba(93,239,149,.85);
padding:.4rem .85rem;
border-radius:999px;
background:rgba(93,239,149,.08);
border:1px solid rgba(93,239,149,.25);
margin-bottom:1.1rem;
}
.exit-modal-dot {
width:6px; height:6px; border-radius:50%;
background:#5def95;
box-shadow:0 0 8px #5def95, 0 0 0 3px rgba(93,239,149,.18);
animation:emPulse 1.5s ease-in-out infinite;
}
@keyframes emPulse {
0%,100% { transform:scale(1); opacity:1; }
50% { transform:scale(1.4); opacity:.65; }
}
.exit-modal-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1.75rem, 3.5vw, 2.5rem);
font-weight:900;
line-height:1.08;
letter-spacing:-.025em;
color:var(--text);
margin:0 0 .75rem;
}
.exit-modal-title em {
font-style:italic;
background:linear-gradient(135deg, #5def95, #3fb4c3, #2684e9);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.exit-modal-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:.98rem; line-height:1.58;
color:var(--muted);
margin:0 0 1.3rem;
}
.exit-modal-desc strong {
color:var(--text);
font-weight:600;
}
.exit-modal-form {
display:flex; gap:.6rem;
margin-bottom:1rem;
flex-wrap:wrap;
}
.exit-modal-input {
flex:1 1 250px;
min-width:0;
padding:.85rem 1.1rem;
border-radius:12px;
border:1px solid rgba(248,248,224,.14);
background:rgba(248,248,224,.03);
color:var(--text);
font-family:'Source Sans 3', 'Myriad Pro', sans-serif;
font-size:.95rem;
transition:border-color .25s, background .25s;
}
.exit-modal-input::placeholder { color:rgba(248,248,224,.4); }
.exit-modal-input:focus {
outline:none;
border-color:rgba(93,239,149,.5);
background:rgba(248,248,224,.05);
box-shadow:0 0 0 3px rgba(93,239,149,.12);
}
.exit-modal-input:invalid:not(:placeholder-shown) {
border-color:rgba(239,68,68,.5);
}
.exit-modal-submit {
flex:0 0 auto;
padding:.85rem 1.3rem !important;
font-size:.9rem !important;
}
.exit-modal-success {
display:none;
align-items:center; gap:.6rem;
padding:1rem 1.2rem;
border-radius:12px;
background:rgba(93,239,149,.1);
border:1px solid rgba(93,239,149,.3);
color:#5def95;
font-family:'Source Sans 3', sans-serif;
font-size:.92rem; font-weight:600;
margin-bottom:1rem;
}
.exit-modal-success.is-visible { display:flex; }
.exit-modal-success svg { width:20px; height:20px; flex-shrink:0; }
.exit-modal-meta {
display:flex; gap:1rem;
flex-wrap:wrap;
font-family:'JetBrains Mono', monospace;
font-size:.7rem;
color:rgba(248,248,224,.5);
padding-top:1rem;
border-top:1px solid rgba(248,248,224,.08);
}
/* Light theme */
[data-theme="light"] .exit-modal-backdrop { background:rgba(28,26,21,.45); }
[data-theme="light"] .exit-modal-input {
background:rgba(0,0,0,.02);
border-color:rgba(0,0,0,.1);
}
[data-theme="light"] .exit-modal-input::placeholder { color:rgba(26,26,30,.38); }
[data-theme="light"] .exit-modal-meta { color:rgba(26,26,30,.5); border-top-color:rgba(0,0,0,.06); }
[data-theme="light"] .exit-modal-close {
background:rgba(0,0,0,.03);
border-color:rgba(0,0,0,.08);
color:rgba(26,26,30,.55);
}
/* Mobile */
@media (max-width:500px) {
.exit-modal { padding:1rem; align-items:flex-end; }
.exit-modal-card { width:100%; border-radius:22px 22px 12px 12px; }
.exit-modal-title { font-size:1.5rem; }
.exit-modal-form { flex-direction:column; }
.exit-modal-submit { width:100%; justify-content:center; }
.exit-modal-meta { font-size:.62rem; gap:.6rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
.exit-modal, .exit-modal-card { transition:opacity .2s ease; transform:none !important; }
.exit-modal-dot { animation:none; }
}
/* ─── ACCESSIBILITY: Skip-to-content link ─────────────── */
.skip-link {
position:fixed; top:0; left:50%;
transform:translate(-50%, -200%);
z-index:9999;
background:linear-gradient(135deg, #5def95, #3fb4c3);
color:#0a1a14;
padding:.85rem 1.5rem;
border-radius:999px;
font-family:'Source Sans 3', 'Myriad Pro', sans-serif;
font-size:.9rem; font-weight:700;
text-decoration:none;
box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 2px rgba(93,239,149,.5);
transition:transform .25s cubic-bezier(.22,1,.36,1);
white-space:nowrap;
}
.skip-link:focus-visible,
.skip-link:focus {
transform:translate(-50%, 12px);
outline:2px solid #fff;
outline-offset:3px;
}
body {
background:var(--bg); color:var(--text);
font-family:var(--f-body); font-size:17px; line-height:1.7;
overflow-x:clip; -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:"kern" 1, "liga" 1, "calt" 1;
cursor:auto;
}
body.mob-open { overflow:hidden; }
p, h1, h2, h3, h4, h5, h6, span, a, li { overflow-wrap:break-word; word-break:break-word; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--f-body); cursor:pointer; }
img, video { max-width:100%; height:auto; display:block; }
ul { list-style:none; }
/* CLS prevention — reserve aspect-ratio space for image containers so the
layout doesn't shift as images load. Cards default to 4:3, hero 16:9,
logos to natural. The runtime enhancer also sets width/height on bare imgs. */
.tile img, .bento img, .case-card img, .leis-card img, .marketing-img img,
.disc-card img, .ref-card img, .hi-card img, .step-card img,
.story-card img, .team-img img, [class*="-card"] img:not([class*="logo"]):not([class*="icon"]) {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}
.hero-x-video, .hero-bg video { aspect-ratio: 16 / 9; }
.embed-frame { aspect-ratio: 16 / 9; min-height: 280px; }
/* Mobile tap target floor — anything that's a link/button must be ≥ 44px touchable
(WCAG 2.5.5 + Google Mobile Usability). Uses padding to extend the hit area
without forcing a visual minimum size on icons. */
@media (pointer: coarse) {
a, button, [role="button"], [role="link"], input[type="checkbox"], input[type="radio"] {
min-height: 32px;
}
.icon-only, button.icon, a.icon, .nv-toggle, .mob-toggle, .ck-no, .ck-yes {
min-width: 44px; min-height: 44px;
}
}
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--b3); border-radius:3px; }
/* ── FOCUS ── */
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible) { outline:none; }
/* ── SCREEN READER ONLY ── */
.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; }
/* ── SKIP LINK ── */
.skip { position:absolute; top:-60px; left:1rem; background:var(--teal); color:var(--bg); padding:.5rem 1rem; border-radius:0 0 var(--r-sm) var(--r-sm); font-weight:700; z-index:9999; transition:top .2s; }
.skip:focus { top:0; }
/* ── CUSTOM CURSOR ── */
#cur { display:none; }
.cur-ring { width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(77,206,175,.45); position:absolute; transform:translate(-50%,-50%); transition:width .25s, height .25s, border-color .25s; }
body.hov .cur-ring { width:50px; height:50px; border-color:var(--teal); }
body.hov .cur-dot { transform:translate(-50%,-50%) scale(1.5); }
/* ── GRAIN TEXTURE ── */
.grain { position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:.022; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
/* ── PAGE SYSTEM ── */
.page { display:none; }
.page.on { display:block; animation:fadeUp .4s ease; }
/* Opacity-only entrance — transforms on .page.on break position:fixed descendants
(fixed elements would follow the translate during the 0.4s animation). */
@keyframes fadeUp { from{opacity:0} to{opacity:1} }
/* ── REVEAL ON SCROLL ── */
.rv { opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.rv.vis { opacity:1; transform:none; }
/* ════════════════════════════════════════════════════════════════
NAVIGATION
════════════════════════════════════════════════════════════════ */
nav {
position:fixed; top:14px; left:50%;
z-index:1000; height:54px;
background:
linear-gradient(180deg, rgba(36,40,48,.14) 0%, rgba(14,16,22,.22) 100%),
linear-gradient(135deg, rgba(93,239,149,.03) 0%, transparent 40%, rgba(63,180,195,.03) 100%);
border:1px solid rgba(255,255,255,.09);
border-top-color:rgba(255,255,255,.22);
border-radius:999px;
backdrop-filter:blur(32px) saturate(200%); -webkit-backdrop-filter:blur(32px) saturate(200%);
box-shadow:
0 10px 36px rgba(0,0,0,.42),
0 1px 2px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -1px 0 rgba(0,0,0,.18),
inset 0 0 0 1px rgba(255,255,255,.04);
display:flex; align-items:center;
width:max-content; max-width:calc(100vw - 2rem);
transition:box-shadow .45s cubic-bezier(.4,0,.2,1), background .45s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1), border-color .45s cubic-bezier(.4,0,.2,1), width .5s cubic-bezier(.4,0,.2,1), max-width .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1);
translate:-50% 0;
will-change:auto;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
nav::before {
/* specular top-arc highlight — the signature glass gloss */
content:'';
position:absolute; inset:0;
border-radius:inherit;
background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%);
pointer-events:none;
opacity:.9;
mix-blend-mode:screen;
}
nav:hover {
border-color:rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.3);
background:
linear-gradient(180deg, rgba(42,46,56,.22) 0%, rgba(16,18,24,.32) 100%),
linear-gradient(135deg, rgba(93,239,149,.05) 0%, transparent 40%, rgba(63,180,195,.05) 100%);
box-shadow:
0 14px 44px rgba(0,0,0,.5),
0 1px 2px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0,0,0,.22),
inset 0 0 0 1px rgba(255,255,255,.06);
}
.nav-wrap { padding:0 1.25rem; display:flex; align-items:center; gap:.6rem; width:100%; }
/* Defense-in-depth: these items must never be squeezed/clipped by flex */
.logo-btn, .nav-sep, .lang, .nav-cta, .menu-btn, .theme-tog { flex-shrink:0; }
/* Dynamic Island — collapsible items */
.nav-sep, .nav-links, .lang {
overflow:visible;
max-width:800px;
opacity:1;
transform:scaleX(1);
transform-origin:center;
transition:opacity .4s cubic-bezier(.4,0,.2,1), max-width .55s cubic-bezier(.4,0,.2,1), margin .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
}
.nav-cta {
transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), font-size .45s cubic-bezier(.4,0,.2,1);
white-space:nowrap; overflow:hidden;
}
/* Mini island: only hide sep, links, lang — keep nav-cta but compact it */
nav.nav-mini .nav-sep,
nav.nav-mini .nav-links,
nav.nav-mini .lang {
overflow:hidden;
opacity:0;
max-width:0;
transform:scaleX(0);
pointer-events:none;
margin:0 !important;
padding:0 !important;
}
nav.nav-mini .nav-cta {
padding:.38rem .9rem;
font-size:.75rem;
}
nav.nav-mini { cursor:pointer; }
nav.nav-mini:hover {
box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.12);
background:linear-gradient(135deg, rgba(22,22,26,.58) 0%, rgba(18,18,22,.54) 50%, rgba(20,20,24,.58) 100%);
}
/* Active page indicator on nav buttons */
.nv-btn.nv-active { color:var(--teal); background:rgba(77,206,175,.08); }
.logo-btn { display:flex; align-items:center; gap:10px; cursor:pointer; border-radius:var(--r-sm); padding:4px 10px 4px 6px; transition:opacity var(--t); }
.logo-btn:hover { opacity:.8; }
.nav-sep { width:1px; height:18px; background:rgba(77,206,175,.2); flex-shrink:0; margin:0 .1rem; }
.logo-text { font-family:var(--f-head); font-weight:800; font-size:1.4rem; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo-sub { font-size:.7rem; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; line-height:1; margin-top:2px; font-weight:500; }
.nav-links { display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.nv { position:relative; }
.nv-btn {
display:flex; align-items:center; gap:5px; padding:.45rem .9rem;
font-size:.92rem; font-weight:500; color:rgba(235,245,255,.82);
background:none; border:none; border-radius:var(--r-sm);
transition:color .15s, background .15s; white-space:nowrap;
letter-spacing:.01em;
}
.nv-btn:hover, .nv-btn.act { color:#f8f8e0; background:rgba(255,255,255,.06); }
.nv-btn svg { transition:transform var(--t); flex-shrink:0; }
.nv:hover .nv-btn svg { transform:rotate(180deg); }
.drop {
position:absolute; top:calc(100% + 8px); left:0;
background:var(--bg2); border:1px solid var(--b);
border-radius:16px; padding:.5rem; min-width:300px;
opacity:0; pointer-events:none; transform:translateY(-8px);
transition:opacity .25s ease, transform .25s ease; box-shadow:0 20px 60px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
}
/* Invisible bridge so mouse can travel from button to dropdown */
.drop::before {
content:''; position:absolute; top:-12px; left:0; right:0; height:14px;
}
.nv:hover .drop, .nv:focus-within .drop { opacity:1; pointer-events:all; transform:none; }
/* Hide dropdowns while scrolling */
nav.drop-lock .drop { opacity:0 !important; pointer-events:none !important; transform:translateY(-8px) !important; }
/* Prevent dropdown from overflowing right edge */
.nv:last-of-type .drop, .nv:nth-last-of-type(2) .drop { left:auto; right:0; }
.drop-lbl { font-size:.78rem; font-weight:600; color:var(--dim); letter-spacing:.12em; text-transform:uppercase; padding:.4rem .9rem .2rem; }
.drop-lnk {
display:flex; align-items:center; gap:10px; padding:.6rem .9rem;
font-size:.82rem; color:var(--muted); border-radius:var(--r-sm);
background:none; border:none; width:100%; text-align:left;
cursor:pointer; font-family:var(--f-body); transition:color .15s, background .15s;
}
.drop-lnk:hover { color:var(--teal); background:rgba(77,206,175,.08); }
.drop-lnk .code { font-family:var(--f-mono); font-size:.75rem; color:var(--teal); opacity:.7; }
.lang { display:flex; background:rgba(255,255,255,.04); border:1px solid var(--b); border-radius:999px; overflow:hidden; }
.lang-b { padding:.28rem .75rem; font-size:.82rem; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; transition:color .2s, background .2s; }
.lang-b.act { background:var(--grad); color:var(--bg); }
/* ═══════════════════════════════════════════════════════════
MAGNETIC CURSOR-REACTIVE NAV — Option 8
Sliding indicator + magnetic hover + aurora sweep
═══════════════════════════════════════════════════════════ */
.nav-links { position:relative; }
/* Sliding indicator underline — inside nav pill, bottom of button row */
.nav-indicator {
position:absolute;
bottom:4px; left:0;
height:2px; width:0;
background:linear-gradient(90deg, #5def95, #3fb4c3, #2684e9);
border-radius:2px;
opacity:0;
pointer-events:none;
transition:opacity .4s cubic-bezier(.22,1,.36,1),
left .5s cubic-bezier(.22,1,.36,1),
width .5s cubic-bezier(.22,1,.36,1);
box-shadow:0 0 12px rgba(63,180,195,.7), 0 0 4px rgba(93,239,149,.5);
z-index:3;
}
.nav-links:hover .nav-indicator { opacity:1; }
/* Magnetic + scale hover: dim siblings, boost hovered */
.nav-links .nv-btn {
transition:color .15s, background .15s,
transform .4s cubic-bezier(.22,1,.36,1),
opacity .35s ease;
position:relative;
will-change:transform;
}
.nav-links:hover .nv-btn { opacity:.5; }
.nav-links:hover li:hover .nv-btn,
.nav-links:hover .nv:hover .nv-btn,
.nav-links:hover .nv-btn.is-hovered { opacity:1; }
/* Aurora sweep — activates during scroll */
nav::before {
content:''; position:absolute; inset:0;
border-radius:inherit;
background:linear-gradient(110deg,
transparent 0%, transparent 35%,
rgba(93,239,149,.08) 45%,
rgba(93,239,149,.12) 50%,
rgba(38,132,233,.08) 55%,
transparent 65%, transparent 100%);
background-size:250% 100%;
background-position:-30% 0;
pointer-events:none;
opacity:0;
transition:opacity .6s ease;
z-index:0;
mix-blend-mode:screen;
}
nav.aurora-on::before {
opacity:1;
animation:auroraSweep 6s ease-in-out infinite;
}
@keyframes auroraSweep {
0% { background-position:-30% 0; }
50% { background-position:130% 0; }
100% { background-position:-30% 0; }
}
/* Ensure nav content sits above aurora */
.nav-wrap { position:relative; z-index:1; }
/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
.nav-indicator,
.nav-links .nv-btn { transition:none !important; }
nav.aurora-on::before { animation:none; }
}
/* Kontakt CTA — refined, engineering-tool aesthetic.
NO outer glow (was too illuminating); muted mint, single depth shadow, soft inset bevel.
Hover lightens toward brand mint with a subtle glow awakening — rewards interaction
without being neon at rest. */
.nav-cta {
display:flex; align-items:center; gap:6px;
background:#5def95; /* matches .btn-p — bright OCGT mint */
color:#0a1a14;
font-weight:700;
font-size:.82rem;
padding:.42rem 1.4rem;
border-radius:999px;
border:1px solid rgba(93,239,149,.38);
transition:background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .2s cubic-bezier(.22,1,.36,1);
white-space:nowrap;
box-shadow:
0 0 0 1px rgba(93,239,149,.38),
0 6px 20px rgba(93,239,149,.22),
inset 0 1px 0 rgba(255,255,255,.32);
height:36px;
position:relative; overflow:hidden;
text-shadow:none;
}
/* Shine sweep kept but subtle (opacity dropped .4 → .22) */
.nav-cta::after {
content:""; position:absolute; top:0; left:-100%;
width:60%; height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
transform:skewX(-20deg);
pointer-events:none;
}
.nav-cta:hover {
transform:translateY(-1px);
background:#6FF5A6; /* matches .btn-p:hover */
border-color:rgba(93,239,149,.5);
box-shadow:
0 0 0 1px rgba(93,239,149,.5),
0 10px 32px rgba(93,239,149,.35),
0 0 48px rgba(93,239,149,.18),
inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-cta:hover::after { left:140%; transition:left .55s cubic-bezier(.4,0,.2,1); }
.nav-cta:active { transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.3), inset 0 1px 2px rgba(0,0,0,.15); }
.menu-btn { display:none; background:none; border:none; color:var(--text); padding:.45rem; border-radius:var(--r-sm); transition:background var(--t); }
.menu-btn:hover { background:rgba(255,255,255,.06); }
.mob-menu { display:none; position:fixed; top:72px; left:50%; transform:translateX(-50%); width:min(320px,calc(100vw - 2rem)); background:rgba(8,6,5,.92); border:1px solid rgba(77,206,175,.18); border-radius:20px; padding:.75rem 1rem 1.5rem; z-index:999; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); box-shadow:0 16px 48px rgba(0,0,0,.6); max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px); overflow-y:auto; -webkit-overflow-scrolling:touch; flex-direction:column; gap:.1rem; opacity:0; transform:translateX(-50%) translateY(-8px); transition:opacity .25s ease, transform .25s ease; }
.mob-menu.open { display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
/* Backdrop overlay behind mobile menu */
.mob-backdrop { display:none; position:fixed; inset:0; z-index:998; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.mob-grp { font-size:.78rem; font-weight:600; color:var(--dim); letter-spacing:.12em; text-transform:uppercase; padding:.4rem 0 .15rem; margin-top:.35rem; }
/* Clickable category header (Geotechnik / Reality Capture) — opens overview page */
a.mob-grp-link { display:flex; align-items:center; justify-content:space-between; padding:.5rem 1rem .35rem; margin-top:.25rem; border-radius:var(--r-sm); color:var(--teal); text-decoration:none; cursor:pointer; transition:color .15s, background .15s; }
a.mob-grp-link:hover, a.mob-grp-link:focus-visible { color:var(--teal); background:rgba(77,206,175,.08); }
a.mob-grp-link .mob-grp-arr { opacity:.65; transition:transform .18s ease, opacity .18s ease; }
a.mob-grp-link:hover .mob-grp-arr, a.mob-grp-link:focus-visible .mob-grp-arr { opacity:1; transform:translateX(2px); }
.mob-lnk { display:block; padding:.5rem 1rem; border-radius:var(--r-sm); font-size:.85rem; font-weight:500; color:var(--muted); background:none; border:none; text-align:left; cursor:pointer; width:100%; font-family:var(--f-body); text-decoration:none; transition:color .15s, background .15s; }
.mob-lnk:hover { color:var(--teal); background:rgba(77,206,175,.07); }
/* Anchor variants of nav buttons inherit surrounding color / no underline */
a.nv-btn, a.drop-lnk, a.mob-lnk, a.sub-nav-lnk { text-decoration:none; color:inherit; }
a.nav-cta { text-decoration:none; color:#0a1a14; }
a.nv-btn:hover, a.drop-lnk:hover, a.mob-lnk:hover, a.sub-nav-lnk:hover { text-decoration:none; }
.mob-lang { display:flex; gap:.5rem; justify-content:center; margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(77,206,175,.1); }
/* ════════════════════════════════════════════════════════════════
COOKIE BANNER
════════════════════════════════════════════════════════════════ */
#cookie {
position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
z-index:2000; width:min(700px, calc(100vw - 2rem));
background:var(--bg2); border:1px solid var(--b3);
border-radius:var(--r); padding:1.5rem;
box-shadow:0 16px 64px rgba(0,0,0,.6); display:none; animation:slideUp .35s ease;
}
#cookie.show { display:block; }
@keyframes slideUp { from{opacity:0;transform:translate(-50%,20px)} to{opacity:1;transform:translate(-50%,0)} }
.ck-inner { display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.ck-text p { font-size:.82rem; color:var(--muted); line-height:1.6; }
.ck-text a { color:var(--teal); }
.ck-btns { display:flex; gap:.75rem; flex-shrink:0; flex-wrap:wrap; align-items:center; }
.ck-yes { background:var(--grad); color:var(--bg); font-weight:600; font-size:.82rem; padding:.55rem 1.4rem; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:var(--f-body); transition:transform var(--t), box-shadow var(--t); }
.ck-yes:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(93,239,149,.22); }
.ck-no { background:transparent; border:1px solid var(--text); color:var(--text); font-weight:600; font-size:.82rem; padding:.55rem 1.4rem; border-radius:var(--r-pill); cursor:pointer; font-family:var(--f-body); transition:background var(--t), color var(--t); white-space:nowrap; }
.ck-no:hover { background:var(--text); color:var(--bg); }
/* ════════════════════════════════════════════════════════════════
LAYOUT UTILITIES
════════════════════════════════════════════════════════════════ */
main { padding-top:var(--nav-h); min-height:100vh; }
.wrap { max-width:1400px; margin:0 auto; padding:0 2.5rem; }
.sec { padding:clamp(4.75rem, 8vw, 7rem) 2.5rem; max-width:1400px; margin:0 auto; }
.sec-sm { padding:4rem 2.5rem; max-width:1400px; margin:0 auto; }
.full-sec { padding:clamp(4.75rem, 8vw, 7rem) 2.5rem; }
.full-wrap { max-width:1400px; margin:0 auto; }
.lbl {
font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5def95;
margin-bottom:1rem; display:flex; align-items:center; gap:10px;
}
.lbl::before { content:none; }
.ttl { font-family:var(--f-head); font-weight:700; font-size:clamp(1.75rem, 3vw, 2.75rem); letter-spacing:-.03em; line-height:1.1; margin-bottom:1.25rem; }
.sub { color:var(--muted); font-size:1.15rem; max-width:600px; line-height:1.75; font-weight:400; }
.grad-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.four-col { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.divider { height:1px; background:var(--b); margin:3rem 0; }
/* ════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════ */
/* Primary CTA — solid mint (THE OCGT color). No gradient; gradient is reserved for hero statements only. */
.btn-p {
display:inline-flex; align-items:center; justify-content:center; gap:10px;
background:#5def95;
color:#0a1a14; font-weight:700; font-size:1rem; letter-spacing:.005em;
padding:1rem 2.5rem; border-radius:10px; border:1px solid rgba(93,239,149,.38);
box-shadow:
0 0 0 1px rgba(93,239,149,.38),
0 6px 20px rgba(93,239,149,.22),
inset 0 1px 0 rgba(255,255,255,.32);
transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
position:relative; overflow:hidden; user-select:none;
text-shadow:none;
}
.btn-p::after { content:""; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transform:skewX(-20deg); transition:none; pointer-events:none; }
.btn-p:hover {
transform:translateY(-2px);
background:#6FF5A6;
border-color:rgba(93,239,149,.5);
box-shadow:
0 0 0 1px rgba(93,239,149,.5),
0 10px 32px rgba(93,239,149,.35),
0 0 48px rgba(93,239,149,.18),
inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-p:hover::after { left:140%; transition:left .6s cubic-bezier(.4,0,.2,1); }
.btn-p:active { transform:translateY(0) scale(.98); transition:all .1s; }
/* Secondary CTA — refined teal-tinted glass */
.btn-o {
display:inline-flex; align-items:center; justify-content:center; gap:10px;
background:linear-gradient(180deg, rgba(93,239,149,.08) 0%, rgba(38,132,233,.06) 100%);
border:1.5px solid rgba(93,239,149,.45);
color:#f8f8e0; font-weight:600; font-size:1rem; letter-spacing:.005em;
padding:1rem 2.5rem; border-radius:10px;
backdrop-filter:blur(32px) saturate(160%); -webkit-backdrop-filter:blur(32px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(93,239,149,.15),
0 4px 20px rgba(0,0,0,.35),
0 0 30px rgba(93,239,149,.1);
transition:all .3s cubic-bezier(.22,1,.36,1);
position:relative; overflow:hidden;
text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.btn-o::before {
content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(180deg, transparent 0%, rgba(93,239,149,.06) 50%, transparent 100%);
opacity:0; transition:opacity .3s;
pointer-events:none;
}
.btn-o:hover {
background:linear-gradient(180deg, rgba(93,239,149,.18) 0%, rgba(38,132,233,.12) 100%);
border-color:rgba(93,239,149,.7);
color:#f8f8e0; transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -1px 0 rgba(93,239,149,.25),
0 8px 32px rgba(93,239,149,.3),
0 0 50px rgba(93,239,149,.15);
}
.btn-o:hover::before { opacity:1; }
.btn-g { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--teal); font-size:1rem; font-weight:600; padding:0; cursor:pointer; font-family:var(--f-body); transition:gap var(--t); }
.btn-g:hover { gap:11px; }
.btn-g svg { transition:transform var(--t); }
.btn-g:hover svg { transform:translateX(3px); }
/* ════════════════════════════════════════════════════════════════
CARDS
════════════════════════════════════════════════════════════════ */
.card {
background:var(--bg-card); border:1px solid var(--b);
border-radius:16px; padding:2rem;
transition:border-color .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.card:hover { border-color:var(--b2); box-shadow:0 1px 3px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); transform:translateY(-4px); }
.svc-card {
background:var(--bg-card); border:1px solid var(--b);
border-radius:16px; padding:2.25rem; position:relative; overflow:hidden;
cursor:pointer; transition:border-color .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.svc-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:var(--grad); transform:scaleX(0); transform-origin:left;
transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover { border-color:var(--b2); transform:translateY(-5px); box-shadow:0 1px 3px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.4), 0 32px 64px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.05); }
.svc-card:hover::before { transform:scaleX(1); }
.svc-card .code { font-family:var(--f-mono); font-size:.78rem; font-weight:600; color:var(--teal); letter-spacing:.1em; margin-bottom:.85rem; opacity:.8; }
.svc-card .icon { width:46px; height:46px; border-radius:10px; background:rgba(77,206,175,.08); border:1px solid var(--b); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.2rem; transition:background var(--t), border-color var(--t); }
.svc-card:hover .icon { background:rgba(77,206,175,.14); border-color:var(--b2); }
.svc-card h3 { font-family:var(--f-head); font-size:1.15rem; font-weight:700; margin-bottom:.6rem; }
.svc-card p { font-size:1rem; color:var(--muted); line-height:1.75; margin-bottom:1.2rem; }
.svc-card .arr { position:absolute; bottom:1.5rem; right:1.5rem; width:30px; height:30px; border-radius:50%; background:rgba(77,206,175,.07); border:1px solid var(--b); display:flex; align-items:center; justify-content:center; color:var(--teal); opacity:0; transform:translateX(-8px); transition:opacity .25s, transform .25s; }
.svc-card:hover .arr { opacity:1; transform:none; }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.tag { font-size:.8rem; padding:.3rem .75rem; background:rgba(77,206,175,.06); border:1px solid var(--b); border-radius:999px; color:var(--dim); transition:color var(--t), border-color var(--t); }
.svc-card:hover .tag { color:var(--teal); border-color:rgba(77,206,175,.2); }
/* ════════════════════════════════════════════════════════════════
IMAGE PLACEHOLDERS — clearly labeled for replacement
════════════════════════════════════════════════════════════════ */
.img-ph {
position:relative; overflow:hidden; border-radius:var(--r);
background:linear-gradient(135deg, #1e1e22 0%, #18181b 100%);
border:2px dashed rgba(77,206,175,.2);
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:2rem; gap:.75rem; cursor:pointer;
transition:border-color var(--t);
}
.img-ph:hover { border-color:rgba(77,206,175,.4); }
.img-ph::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(77,206,175,.05) 0%, transparent 70%); pointer-events:none; }
.img-ph .ph-icon { font-size:2.2rem; position:relative; z-index:1; }
.img-ph .ph-type { font-size:.85rem; font-weight:600; color:var(--teal); letter-spacing:.08em; text-transform:uppercase; position:relative; z-index:1; }
.img-ph .ph-path { font-size:.75rem; color:rgba(77,206,175,.5); font-family:var(--f-mono); position:relative; z-index:1; margin-top:.1rem; }
.img-ph .ph-size { font-size:.75rem; color:var(--dim); position:relative; z-index:1; }
/* Real image — once you add photos */
.img-ph img { width:100%; height:100%; object-fit:cover; border-radius:var(--r); position:absolute; inset:0; }
/* ── BILINGUAL SUPPORT ── */
html.lang-en .de-only { display:none !important; }
html.lang-de .en-only { display:none !important; }
/* ════════════════════════════════════════════════════════════════
HERO
════════════════════════════════════════════════════════════════ */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + 2.5rem) 0 4rem; overflow:hidden; margin-top:calc(-1 * var(--nav-h)); }
/* ════════════════════════════════════════════════════════════════
HERO CINEMA — Apple-style scroll-morphing hero
3 frames transition on scroll: MESSEN → ZENTIMETERGENAU → CTAs
════════════════════════════════════════════════════════════════ */
.hero-cinema-wrap {
position:relative;
height:300vh;
margin-top:calc(-1 * var(--nav-h));
background:var(--bg);
}
/* ═══════════════════════════════════════════════════════════
RADICAL COMBO HERO — Option 1+5+8 fusion
Layer 1: Video (proxies Gaussian splat) + sci-fi overlays
Layer 2: Kinetic typography (letter-by-letter reveal)
Layer 3: Glass-morphism floating panel with CTAs
Layer 4: HUD corner elements (coordinates, LIVE indicator)
═══════════════════════════════════════════════════════════ */
.hero-x {
position:relative;
min-height:100vh; min-height:100svh;
margin-top:calc(-1 * var(--nav-h));
background:var(--bg);
overflow:hidden;
isolation:isolate;
--hx-mx:0; /* cursor x -1..1, set by JS */
--hx-my:0; /* cursor y -1..1 */
}
/* ─── Layer 1: 3D point cloud canvas (replaces video) ──── */
.hero-x-bg {
position:absolute; inset:0;
z-index:0;
overflow:hidden;
/* Pure-CSS brand placeholder — shows instantly while Three.js loads.
NO reference to the old video poster. Teal → mint bloom on warm black. */
background:
radial-gradient(ellipse 55% 45% at 30% 20%, rgba(93,239,149,.22) 0%, transparent 60%),
radial-gradient(ellipse 60% 55% at 75% 80%, rgba(93,239,149,.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 60% at 80% 25%, rgba(38,132,233,.12) 0%, transparent 60%),
linear-gradient(180deg, #0E0D0A 0%, #151310 50%, #0E0D0A 100%);
}
/* Fade the CSS placeholder once the video first-frame has painted */
.hero-x.has-video .hero-x-bg { background:var(--bg); transition:background .6s ease; }
/* Primary hero video — full-bleed, muted autoplay loop.
Filter darkens + saturates for cinematic mood and to give overlays proper contrast. */
.hero-x-video {
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
filter:saturate(1.08) brightness(.72) contrast(1.05);
transform:scale(1.03) translate(calc(var(--hx-mx) * -10px), calc(var(--hx-my) * -8px));
transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .8s ease;
will-change:transform;
z-index:0;
opacity:0;
}
.hero-x-video.is-ready { opacity:1; }
@media (prefers-reduced-motion:reduce) {
.hero-x-video { transform:scale(1.03); transition:none; }
}
.hero-x-bg-tint {
position:absolute; inset:0;
background:
radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,0) 0%, rgba(14,13,10,.3) 55%, rgba(14,13,10,.82) 100%),
linear-gradient(180deg, rgba(14,13,10,.25) 0%, rgba(14,13,10,.08) 40%, rgba(14,13,10,.55) 100%);
}
/* ─── Layer 2: Sci-fi overlays ────────────────────────── */
.hero-x-overlays {
position:absolute; inset:0;
z-index:1;
pointer-events:none;
}
/* Technical grid pattern (perspective floor) */
.hero-x-grid {
position:absolute; inset:0;
background-image:
linear-gradient(rgba(93,239,149,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(93,239,149,.08) 1px, transparent 1px);
background-size: 80px 80px;
mask-image:radial-gradient(ellipse 80% 70% at 50% 60%, black 20%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 60%, black 20%, transparent 80%);
opacity:.6;
}
/* Scanline sweep — full to-and-fro: bottom → top → bottom in one cycle */
.hero-x-scanline {
position:absolute; left:0; right:0; top:-20%;
height:140%;
background:linear-gradient(180deg,
transparent 48%,
rgba(93,239,149,.06) 49.5%,
rgba(93,239,149,.14) 50%,
rgba(93,239,149,.06) 50.5%,
transparent 52%);
animation:hxScan 16s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxScan {
0% { transform:translateY(60%); opacity:0; }
8% { opacity:.8; }
45% { transform:translateY(-40%); opacity:.8; }
55% { transform:translateY(-40%); opacity:.8; }
92% { transform:translateY(60%); opacity:.8; }
100% { transform:translateY(60%); opacity:0; }
}
/* LiDAR scan cursor — vertical brand-mint blade sweeping L→R once on load.
Times with the per-letter reveal so each letter "calibrates" as the line passes. */
.hero-x-scancursor {
position:absolute; top:0; bottom:0;
width:3px;
left:-6%;
background:linear-gradient(180deg,
transparent 0%,
rgba(93,239,149,.55) 22%,
rgba(93,239,149,1) 46%,
rgba(248,248,224,1) 50%,
rgba(93,239,149,1) 54%,
rgba(93,239,149,.55) 78%,
transparent 100%);
box-shadow:
0 0 18px 2px rgba(93,239,149,.85),
0 0 60px 10px rgba(93,239,149,.4);
opacity:0;
mix-blend-mode:screen;
pointer-events:none;
z-index:2;
animation:hxScanCursor 1.85s cubic-bezier(.55,.0,.4,1) .35s forwards;
}
@keyframes hxScanCursor {
0% { left:-6%; opacity:0; }
6% { opacity:1; }
88% { opacity:1; }
100% { left:106%; opacity:0; }
}
/* Drift particles (CSS-only) */
.hero-x-particles {
position:absolute; inset:0;
background-image:
radial-gradient(1px 1px at 18% 32%, rgba(93,239,149,.7), transparent 50%),
radial-gradient(1px 1px at 72% 18%, rgba(93,239,149,.6), transparent 50%),
radial-gradient(1.5px 1.5px at 34% 78%, rgba(38,132,233,.5), transparent 50%),
radial-gradient(1px 1px at 88% 64%, rgba(93,239,149,.65), transparent 50%),
radial-gradient(1px 1px at 12% 88%, rgba(93,239,149,.55), transparent 50%),
radial-gradient(1.5px 1.5px at 52% 24%, rgba(248,248,224,.5), transparent 50%),
radial-gradient(1px 1px at 82% 38%, rgba(93,239,149,.5), transparent 50%);
animation:hxDrift 14s ease-in-out infinite alternate;
}
@keyframes hxDrift {
0% { transform:translate(0,0); }
100% { transform:translate(18px, -12px); }
}
/* Vignette (darkens corners for cinematic feel) */
.hero-x-vignette {
position:absolute; inset:0;
box-shadow:inset 0 0 220px 80px rgba(14,13,10,.75);
}
/* Ambient brand glow (radial, cursor-reactive) */
.hero-x-glow {
position:absolute;
width:55vw; height:55vh;
border-radius:50%;
filter:blur(120px);
background:radial-gradient(circle, rgba(63,180,195,.18) 0%, rgba(93,239,149,.08) 50%, transparent 80%);
left:calc(25% + var(--hx-mx) * 80px);
top:calc(15% + var(--hx-my) * 60px);
transition:left .5s ease-out, top .5s ease-out;
pointer-events:none;
mix-blend-mode:screen;
}
/* ─── Layer 3: Kinetic typography ─────────────────────── */
.hero-x-type {
position:absolute;
left:50%; top:38%;
z-index:3;
text-align:center;
pointer-events:none;
width:max-content;
max-width:95vw;
transform:translate(-50%, -50%) translate3d(calc(var(--hx-mx) * 14px), calc(var(--hx-my) * 10px), 0);
transition:transform .6s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.hero-x-pre {
display:block;
font-family:'Fraunces', Georgia, 'Times New Roman', serif;
font-style:italic; font-weight:400;
font-size:clamp(1.2rem, 2.2vw, 2rem);
color:rgba(248,248,224,.75);
letter-spacing:-.005em;
margin-bottom:.4rem;
text-shadow:0 2px 24px rgba(0,0,0,.55);
opacity:0;
transform:translateY(-10px);
animation:hxPreIn .85s cubic-bezier(.22,1,.36,1) .2s forwards;
}
@keyframes hxPreIn {
0% { opacity:0; transform:translateY(-14px); filter:blur(4px); }
100% { opacity:1; transform:translateY(0); filter:blur(0); }
}
.hero-x-main {
display:flex; justify-content:center;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(4.5rem, 13vw, 11rem);
font-weight:900;
letter-spacing:-.045em;
line-height:.9;
margin:0;
color:#f8f8e0;
text-shadow:0 10px 80px rgba(0,0,0,.45), 0 0 60px rgba(93,239,149,.22);
white-space:nowrap;
}
/* Each letter is its own animated span — LiDAR scan reveal:
point-cloud (mint outline) → scan-hit glitch → calibrated cream */
.hx-letter {
display:inline-block;
position:relative;
opacity:0;
color:transparent;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1.4px rgba(93,239,149,0);
text-shadow:none;
filter:blur(0);
transform:translateY(0);
animation:hxLidarReveal 1.55s cubic-bezier(.22,1,.36,1) forwards;
will-change:opacity, transform, filter, color;
}
@keyframes hxLidarReveal {
/* hidden */
0% { opacity:0; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.4px rgba(93,239,149,0); filter:blur(3px); transform:translateY(6px); }
/* point-cloud surfaces (faint mint outline) */
20% { opacity:.55; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.4px rgba(93,239,149,.55); filter:blur(1.2px); transform:translateY(2px); }
/* SCAN HIT — clean mint flash, no jitter */
42% { opacity:1; color:rgba(159,240,182,1); -webkit-text-fill-color:rgba(159,240,182,1); -webkit-text-stroke:0 transparent; text-shadow:0 0 22px rgba(93,239,149,.95), 0 0 44px rgba(63,180,195,.45); filter:blur(.2px); transform:translateY(0); }
/* fades down to settled cream */
68% { color:#f4f8e6; -webkit-text-fill-color:#f4f8e6; text-shadow:0 0 12px rgba(93,239,149,.4), 0 8px 60px rgba(0,0,0,.45); transform:translateY(0); }
/* settled */
100% { opacity:1; color:#f4f8e6; -webkit-text-fill-color:#f4f8e6; -webkit-text-stroke:0 transparent; text-shadow:0 10px 80px rgba(0,0,0,.45), 0 0 36px rgba(93,239,149,.22); filter:blur(0); transform:translateY(0); }
}
/* Stagger: 95ms per letter — snappy but still visible */
.hx-letter:nth-child(1) { animation-delay:.55s; }
.hx-letter:nth-child(2) { animation-delay:.645s; }
.hx-letter:nth-child(3) { animation-delay:.74s; }
.hx-letter:nth-child(4) { animation-delay:.835s; }
.hx-letter:nth-child(5) { animation-delay:.93s; }
.hx-letter:nth-child(6) { animation-delay:1.025s; }
.hx-letter:nth-child(7) { animation-delay:1.12s; }
.hx-letter:nth-child(8) { animation-delay:1.215s; }
/* Resting drop-shadow halo on main letters (gradient retired in favor of LiDAR reveal) */
.hero-x-main .hx-letter {
filter:drop-shadow(0 4px 40px rgba(93,239,149,.28));
}
/* ─── Layer 4: Glass-morphism command bar ─────────────── */
.hero-x-panel {
position:absolute;
left:50%; bottom:clamp(5.5rem, 9vh, 7rem);
transform:translate(-50%, 0) translate3d(calc(var(--hx-mx) * 5px), 0, 0);
z-index:4;
width:min(920px, 92vw);
padding:1.25rem 1.6rem;
border-radius:16px;
background:rgba(14,13,10,.5);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);
border:1px solid rgba(248,248,224,.1);
border-top:1px solid rgba(248,248,224,.22);
box-shadow:
0 20px 60px rgba(0,0,0,.5),
0 0 40px rgba(93,239,149,.1),
inset 0 1px 0 rgba(255,255,255,.07);
opacity:0;
animation:hxPanelIn .9s cubic-bezier(.22,1,.36,1) 1.9s forwards;
transition:transform .6s cubic-bezier(.22,1,.36,1);
will-change:transform;
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"hook ctas"
"meta meta";
gap:1.1rem 1.75rem;
align-items:center;
}
@keyframes hxPanelIn {
0% { opacity:0; transform:translate(-50%, 18px); }
100% { opacity:1; transform:translate(-50%, 0); }
}
/* Gradient border outline */
.hero-x-panel::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit; padding:1px;
background:linear-gradient(140deg, rgba(93,239,149,.35), rgba(63,180,195,.22), rgba(38,132,233,.15), transparent);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none;
opacity:.65;
}
.hero-x-panel-hook-wrap { grid-area:hook; min-width:0; }
.hero-x-panel-eyebrow {
display:inline-flex; align-items:center; gap:.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.72rem; font-weight:700;
letter-spacing:.12em; text-transform:uppercase;
color:rgba(93,239,149,.92);
margin-bottom:.55rem;
white-space:nowrap;
}
.hx-dot {
display:inline-block;
width:6px; height:6px; border-radius:50%;
background:#5def95;
box-shadow:0 0 8px #5def95, 0 0 0 3px rgba(93,239,149,.18);
animation:hxDot 1.8s ease-in-out infinite;
flex-shrink:0;
}
@keyframes hxDot {
0%,100% { transform:scale(1); opacity:1; }
50% { transform:scale(1.4); opacity:.65; }
}
.hero-x-panel-hook {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(.92rem, 1.1vw, 1.05rem);
font-weight:500;
line-height:1.45;
color:rgba(248,248,224,.92);
margin:0;
letter-spacing:-.005em;
text-wrap:balance;
}
.hero-x-panel-hook em {
font-style:normal; font-weight:700;
color:#f8f8e0;
background:none;
-webkit-text-fill-color:#f8f8e0;
}
.hero-x-panel-ctas {
grid-area:ctas;
display:flex; gap:.6rem;
flex-wrap:nowrap;
align-items:center;
}
.hero-x-panel-ctas .btn-p,
.hero-x-panel-ctas .btn-o {
white-space:nowrap;
}
.hero-x-panel-meta {
grid-area:meta;
display:grid;
grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
align-items:center; column-gap:.9rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.78rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase;
color:rgba(248,248,224,.92);
padding-top:.95rem;
border-top:1px solid rgba(248,248,224,.10);
text-align:center;
}
.hero-x-panel-meta > span:not(.hx-dot-sep) {
display:inline-flex; align-items:baseline; justify-content:center; gap:.4em;
white-space:nowrap;
}
/* Numeric tokens (±cm, 48h, 50+, LPH 8) get the one signature colour so the eye catches them first. */
.hero-x-panel-meta .hx-meta-val {
color:#5def95; /* --mint, hard-coded for isolation against theme drift */
font-weight:700;
letter-spacing:.12em;
margin-right:.15em;
}
.hx-dot-sep {
width:3px; height:3px; border-radius:50%;
background:rgba(93,239,149,.45);
flex-shrink:0;
}
/* Hero secondary CTA ("Live 3D Demo") — demoted to neutral ghost so "Request a project" owns the eye.
Teal-tinted border replaced with warm-white low-opacity stroke; no background ever. */
.hero-x-panel-ctas .btn-o {
background:transparent !important;
border-color:rgba(248,248,224,.18) !important;
color:rgba(248,248,224,.82) !important;
font-weight:500;
}
.hero-x-panel-ctas .btn-o:hover {
border-color:rgba(248,248,224,.34) !important;
color:rgba(248,248,224,1) !important;
background:rgba(248,248,224,.04) !important;
}
/* ─── Layer 5: HUD corner elements ────────────────────── */
.hero-x-hud {
position:absolute;
z-index:4;
display:flex; align-items:center; gap:.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.64rem; font-weight:700;
letter-spacing:.16em; text-transform:uppercase;
color:rgba(248,248,224,.78);
padding:.45rem .85rem;
border-radius:999px;
background:rgba(14,13,10,.55);
backdrop-filter:blur(12px) saturate(140%);
-webkit-backdrop-filter:blur(12px) saturate(140%);
border:1px solid rgba(248,248,224,.14);
opacity:0;
animation:hxHudIn .7s cubic-bezier(.22,1,.36,1) 2.2s forwards;
white-space:nowrap;
}
@keyframes hxHudIn { to { opacity:1; } }
.hero-x-hud-tl { top:calc(var(--nav-h) + 1.5rem); left:1.5rem; }
.hero-x-hud-tr { top:calc(var(--nav-h) + 1.5rem); right:1.5rem; color:rgba(93,239,149,.75); border-color:rgba(93,239,149,.22); }
.hero-x-hud-bl { bottom:1.5rem; left:1.5rem; }
.hero-x-hud-br {
bottom:.75rem; left:50%;
transform:translateX(-50%);
flex-direction:column; gap:.35rem;
font-size:.5rem; letter-spacing:.28em;
padding:.2rem .5rem;
background:transparent;
border:none;
backdrop-filter:none; -webkit-backdrop-filter:none;
box-shadow:none;
color:rgba(248,248,224,.55);
opacity:0;
animation:hxHudIn .7s cubic-bezier(.22,1,.36,1) 2.2s forwards;
}
.hero-x-hud-br:hover { color:rgba(93,239,149,.95); border:none; background:transparent; }
.hero-x-hud-br .hxs-track {
width:1px; height:28px;
background:linear-gradient(180deg, rgba(248,248,224,.08), rgba(93,239,149,.45), rgba(248,248,224,0));
position:relative; overflow:hidden;
}
.hero-x-hud-br .hxs-track::after {
content:""; position:absolute; left:50%; top:0;
width:3px; height:8px; border-radius:2px;
background:#5def95; box-shadow:0 0 6px #5def95;
transform:translateX(-50%);
animation:hxsDrop 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes hxsDrop {
0% { top:-8px; opacity:0; }
20% { opacity:1; }
80% { opacity:1; }
100% { top:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-x-hud-br .hxs-track::after { animation:none; top:40%; }
}
/* Interactive scroll-cue HUD — appears as chip but is a real button */
button.hero-x-hud { cursor:pointer; font:inherit; }
button.hero-x-hud:hover { color:rgba(93,239,149,.95); border-color:rgba(93,239,149,.35); }
button.hero-x-hud:focus-visible { outline:2px solid #5def95; outline-offset:3px; }
.hero-x-hud-br svg { width:12px; height:12px; animation:hxArrow 1.6s ease-in-out infinite; }
@keyframes hxArrow { 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }
.hx-live-dot {
width:6px; height:6px; border-radius:50%;
background:#ef4444;
box-shadow:0 0 8px #ef4444, 0 0 0 3px rgba(239,68,68,.2);
animation:hxDot 1.4s ease-in-out infinite;
}
/* ─── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
.hero-x-bg video,
.hero-x-type,
.hero-x-panel { transition:none !important; transform:none !important; }
.hero-x-scanline, .hero-x-particles,
.hx-dot, .hx-live-dot, .hero-x-hud-br svg,
.hero-x-scancursor { animation:none !important; }
.hero-x-scancursor { display:none !important; }
.hx-letter {
animation:none !important;
opacity:1 !important;
color:#f4f8e6 !important;
-webkit-text-fill-color:#f4f8e6 !important;
-webkit-text-stroke:0 transparent !important;
text-shadow:0 10px 80px rgba(0,0,0,.45), 0 0 36px rgba(93,239,149,.22) !important;
transform:none !important;
filter:drop-shadow(0 4px 40px rgba(93,239,149,.28)) !important;
}
}
/* ─── Mobile ───────────────────────────────────────────── */
@media (max-width:820px) {
.hero-x-type { top:34%; }
.hero-x-main { font-size:clamp(3.5rem, 18vw, 6rem); }
.hero-x-pre { font-size:clamp(1rem, 4.5vw, 1.4rem); margin-bottom:.35rem; }
.hero-x-scancursor { width:2px; box-shadow:0 0 14px 1px rgba(93,239,149,.7), 0 0 40px 6px rgba(63,180,195,.35); }
.hero-x-panel {
bottom:clamp(2rem, 4vh, 3rem);
padding:1rem 1.1rem;
width:calc(100vw - 1.5rem);
box-sizing:border-box;
grid-template-columns:1fr;
grid-template-areas:
"hook"
"ctas"
"meta";
gap:.85rem;
}
/* Fix: CTAs stack vertically on mobile to prevent overflow */
.hero-x-panel-ctas {
flex-direction:column;
width:100%;
gap:.55rem;
}
.hero-x-panel-ctas .btn-p,
.hero-x-panel-ctas .btn-o {
width:100%;
box-sizing:border-box;
justify-content:center;
min-width:0;
min-height:46px;
padding:.78rem 1rem !important;
font-size:.92rem !important;
border-radius:10px !important;
letter-spacing:.01em;
}
.hero-x-panel-ctas .btn-o {
background:rgba(248,248,224,.06) !important;
border:1px solid rgba(248,248,224,.28) !important;
color:rgba(248,248,224,.96) !important;
backdrop-filter:blur(8px) saturate(140%) !important;
-webkit-backdrop-filter:blur(8px) saturate(140%) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.25);
font-weight:600;
}
.hero-x-panel-meta {
grid-template-columns:repeat(4, auto);
column-gap:.55rem;
row-gap:.35rem;
font-size:.55rem;
letter-spacing:.1em;
padding-top:.75rem;
justify-content:center;
}
.hero-x-panel-meta .hx-dot-sep { display:none; }
.hero-x-panel-eyebrow { font-size:.72rem; }
.hero-x-panel-hook { font-size:.88rem; }
.hero-x-hud-tl, .hero-x-hud-tr { font-size:.52rem; padding:.32rem .65rem; }
.hero-x-hud-bl { display:none; }
/* Fix: keep SCROLL hint at bottom-right, hide it when panel appears */
.hero-x-hud-br { display:none; }
.hero-x-grid { background-size:50px 50px; }
}
/* Tiny mobile */
@media (max-width:400px) {
.hero-x-panel-meta {
grid-template-columns:repeat(2, 1fr);
column-gap:.6rem;
row-gap:.45rem;
font-size:.55rem;
letter-spacing:.1em;
}
.hero-x-panel-meta > span:not(.hx-dot-sep) { justify-content:flex-start; padding:0 .25rem; }
.hero-x-hud-tl, .hero-x-hud-tr { font-size:.48rem; padding:.28rem .55rem; }
}
.hero-cinema {
position:sticky; top:0;
height:100vh; height:100svh;
overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.hero-cinema video {
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
z-index:0;
transition:transform 1.4s cubic-bezier(.22,1,.36,1), filter 1.4s ease;
transform:scale(1);
filter:brightness(.7) saturate(1);
}
.hero-cinema.f1 video { transform:scale(1); filter:brightness(.72) saturate(1); }
.hero-cinema.f2 video { transform:scale(1.1); filter:brightness(.55) saturate(1.15) blur(2px); }
.hero-cinema.f3 video { transform:scale(1.18); filter:brightness(.38) saturate(1) blur(5px); }
/* Dark atmospheric overlay */
.hero-cinema::after {
content:''; position:absolute; inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(0,0,0,.45) 70%),
linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.8) 100%);
z-index:1; pointer-events:none;
transition:opacity .8s ease;
}
.hero-cinema.f3::after { background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.85) 100%); }
/* Ambient glow */
.hero-cinema-glow {
position:absolute; inset:0;
background:
radial-gradient(circle 500px at 20% 30%, rgba(93,239,149,.08) 0%, transparent 60%),
radial-gradient(circle 600px at 80% 70%, rgba(38,132,233,.06) 0%, transparent 60%);
z-index:2; pointer-events:none;
opacity:0; transition:opacity 1s ease;
}
.hero-cinema.f2 .hero-cinema-glow,
.hero-cinema.f3 .hero-cinema-glow { opacity:1; }
/* Frames stack in same viewport */
.hero-frame {
position:absolute; inset:0;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
padding:var(--nav-h) clamp(1.5rem, 5vw, 5rem) clamp(4rem, 10vh, 6rem);
box-sizing:border-box;
z-index:3;
opacity:0;
transform:translateY(36px);
transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
pointer-events:none;
text-align:center;
}
.hero-frame.active { opacity:1; transform:translateY(0); pointer-events:auto; }
.hero-frame.exit-up { opacity:0; transform:translateY(-36px); }
/* FRAME 1 — Nicht schätzen (top-left) + MESSEN (center) */
.hero-frame-1 .f1-pre {
position:absolute;
top:clamp(7rem, 18vh, 13rem);
left:clamp(1.5rem, 5vw, 5rem);
font-family:'Fraunces', Georgia, 'Times New Roman', serif;
font-style:italic; font-weight:400;
font-size:clamp(1.3rem, 2.4vw, 2.2rem);
color:rgba(248,248,224,.82);
letter-spacing:-.005em;
text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero-frame-1 .f1-word {
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%);
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(5rem, 17vw, 15rem);
font-weight:900;
letter-spacing:-.045em;
line-height:.88;
color:#f8f8e0;
text-shadow:0 8px 70px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.05);
white-space:nowrap;
}
/* FRAME 2 — ZENTIMETERGENAU with gradient + sub-line */
.hero-frame-2 .f2-lbl {
font-family:'JetBrains Mono', monospace;
font-size:clamp(.7rem, .9vw, .82rem);
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(93,239,149,.85);
margin-bottom:2rem;
}
.hero-frame-2 .f2-lbl::before {
content:''; display:inline-block; width:32px; height:2px;
background:linear-gradient(90deg, #5def95, #3fb4c3);
vertical-align:middle; margin-right:.8rem;
}
.hero-frame-2 .f2-word {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.8rem, 9.5vw, 8.5rem);
font-weight:900;
letter-spacing:-.035em;
line-height:.95;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 45%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 4px 40px rgba(93,239,149,.35));
margin:0;
text-wrap:balance;
}
.hero-frame-2 .f2-sub {
font-family:'Fraunces', Georgia, serif;
font-style:italic; font-weight:400;
font-size:clamp(1rem, 1.5vw, 1.4rem);
color:rgba(248,248,224,.65);
margin-top:1.5rem;
letter-spacing:-.005em;
}
/* FRAME 3 — Eyebrow + Hook + CTAs + Credibility */
.hero-frame-3 { gap:1.25rem; }
.hero-frame-3 .f3-eyebrow {
font-family:'JetBrains Mono', monospace;
font-size:clamp(.66rem, .82vw, .78rem);
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(93,239,149,.85);
}
.hero-frame-3 .f3-eyebrow::before {
content:''; display:inline-block; width:28px; height:2px;
background:linear-gradient(90deg, #5def95, #3fb4c3);
vertical-align:middle; margin-right:.75rem;
}
.hero-frame-3 .f3-hook {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1.6rem, 3.2vw, 2.9rem);
font-weight:800;
line-height:1.12;
letter-spacing:-.025em;
color:rgba(255,255,255,.97);
max-width:900px;
margin:0;
text-shadow:0 4px 40px rgba(0,0,0,.4);
text-wrap:balance;
}
.hero-frame-3 .f3-hook em {
font-style:normal;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-frame-3 .f3-ctas {
display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
margin-top:.75rem;
}
.hero-frame-3 .f3-cred {
display:inline-flex; align-items:center; gap:.55rem;
font-family:'JetBrains Mono', monospace;
font-size:clamp(.66rem, .82vw, .78rem);
font-weight:500;
letter-spacing:.12em;
color:rgba(248,248,224,.7);
text-transform:uppercase;
margin-top:.85rem;
padding:.55rem 1.1rem;
border-radius:999px;
border:1px solid rgba(248,248,224,.1);
background:rgba(0,0,0,.35);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.hero-frame-3 .f3-cred-star {
color:#5def95;
font-size:.9rem; line-height:1;
filter:drop-shadow(0 0 6px rgba(93,239,149,.6));
}
/* Progress dots */
.hero-cinema-dots {
position:absolute;
bottom:clamp(1.5rem, 3.5vh, 2.75rem);
left:50%; transform:translateX(-50%);
display:flex; gap:.6rem; z-index:5;
}
.hero-cinema-dot {
width:8px; height:8px; border-radius:50%;
border:none; background:rgba(248,248,224,.2);
cursor:pointer; padding:0;
transition:all .4s cubic-bezier(.22,1,.36,1);
}
.hero-cinema-dot.active {
background:linear-gradient(135deg, #5def95, #3fb4c3);
box-shadow:0 0 12px rgba(93,239,149,.45);
transform:scale(1.35);
}
/* Scroll hint (bottom) */
.hero-cinema-hint {
position:absolute;
bottom:clamp(1.5rem, 3.5vh, 2.75rem);
right:clamp(1.5rem, 4vw, 3.5rem);
display:flex; align-items:center; gap:.55rem;
font-family:'JetBrains Mono', monospace;
font-size:.66rem; font-weight:600;
letter-spacing:.15em; text-transform:uppercase;
color:rgba(248,248,224,.55);
z-index:5;
opacity:1; transition:opacity .5s ease;
}
.hero-cinema.f3 .hero-cinema-hint { opacity:0; }
.hero-cinema-hint svg { width:12px; height:12px; animation:heroArrowBounce 1.6s ease-in-out infinite; }
@keyframes heroArrowBounce { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
/* Reduced motion fallback */
@media(prefers-reduced-motion:reduce) {
.hero-cinema-wrap { height:auto; }
.hero-cinema { position:relative; height:100vh; }
.hero-cinema video { transition:none; transform:none !important; filter:brightness(.5) !important; }
.hero-frame { position:absolute; inset:0; transition:none; transform:none !important; opacity:1; pointer-events:auto; }
.hero-frame-1, .hero-frame-2 { display:none; }
.hero-frame-3 { opacity:1; }
.hero-cinema-dots, .hero-cinema-hint { display:none; }
}
/* Mobile */
@media(max-width:768px) {
.hero-cinema-wrap { height:280vh; }
.hero-frame-1 .f1-pre { top:clamp(5rem, 12vh, 8rem); font-size:clamp(1.1rem, 4vw, 1.5rem); }
.hero-frame-1 .f1-word { font-size:clamp(3rem, 17vw, 6rem); }
.hero-frame-2 .f2-word { font-size:clamp(2rem, 9vw, 4.5rem); }
.hero-frame-2 .f2-sub { font-size:.92rem; }
.hero-frame-3 .f3-hook { font-size:clamp(1.25rem, 5.5vw, 2rem); }
.hero-frame-3 .f3-ctas { flex-direction:column; width:100%; max-width:320px; }
.hero-frame-3 .f3-ctas .btn-p,
.hero-frame-3 .f3-ctas .btn-o { width:100%; justify-content:center; }
.hero-cinema-hint { display:none; }
}
/* ════════════════════════════════════════════════════════════════
EDITORIAL HERO — "Engineering Monograph" (frontend-design skill)
Cream on ink · Fraunces serif · Signal red rule · Asymmetric grid
════════════════════════════════════════════════════════════════ */
.ed-hero {
--ink: #0a0a0a;
--ink-raise: #141414;
--cream: #f2e8d5;
--cream-dim: rgba(242,232,213,.62);
--cream-fade:rgba(242,232,213,.35);
--rule: rgba(242,232,213,.18);
--signal: #d7432a;
--mint: #7eebaa;
background:var(--ink);
padding:0;
display:block;
min-height:100vh; min-height:100svh;
overflow:hidden;
}
/* Nuke old hero children so nothing bleeds through */
.ed-hero > :not(.ed-hero-inner):not(.ed-grain) {
display:none !important;
}
/* Grain texture backdrop — subtle film noise via radial stipple */
.ed-grain {
position:absolute; inset:0; z-index:0;
pointer-events:none;
background-image:
radial-gradient(circle at 12% 18%, rgba(242,232,213,.025) 0%, transparent 1.5%),
radial-gradient(circle at 73% 42%, rgba(242,232,213,.02) 0%, transparent 1.3%),
radial-gradient(circle at 38% 82%, rgba(242,232,213,.022) 0%, transparent 1.4%),
radial-gradient(circle at 92% 88%, rgba(242,232,213,.018) 0%, transparent 1.2%),
radial-gradient(circle at 25% 58%, rgba(0,0,0,.5) 0%, transparent 1.5%),
radial-gradient(circle at 62% 12%, rgba(0,0,0,.4) 0%, transparent 1.3%);
background-size:160px 160px, 220px 220px, 190px 190px, 200px 200px, 175px 175px, 240px 240px;
mix-blend-mode:screen;
opacity:.7;
}
/* Subtle warm vignette at bottom edge */
.ed-hero::after {
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse 60% 40% at 50% 110%, rgba(215,67,42,.08) 0%, transparent 60%),
radial-gradient(ellipse 80% 60% at 20% 100%, rgba(20,20,20,.6) 0%, transparent 70%);
}
.ed-hero-inner {
position:relative; z-index:2;
max-width:1600px;
width:100%;
margin:0 auto;
min-height:100vh; min-height:100svh;
padding:calc(var(--nav-h) + 1.75rem) clamp(2rem, 4vw, 4rem) 2.25rem;
display:flex; flex-direction:column;
justify-content:space-between;
box-sizing:border-box;
color:var(--cream);
}
/* ── FOLIO BARS — publication-style header/footer */
.ed-folio {
display:flex; align-items:center; gap:clamp(1rem, 2vw, 2rem);
font-family:'JetBrains Mono','Fira Code',monospace;
font-size:.68rem;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--cream-dim);
opacity:0;
animation:edFadeIn 1.2s ease .1s forwards;
}
.ed-folio-left, .ed-folio-right { flex-shrink:0; }
.ed-folio-rule {
flex:1;
height:1px;
background:linear-gradient(90deg, var(--rule) 0%, var(--rule) 50%, transparent 100%);
}
.ed-folio--bottom .ed-folio-rule {
background:linear-gradient(90deg, transparent 0%, var(--rule) 50%, var(--rule) 100%);
}
/* ── MAIN ASYMMETRIC LAYOUT */
.ed-main {
display:grid;
grid-template-columns:1fr minmax(280px, 340px);
gap:clamp(2rem, 5vw, 5.5rem);
padding:clamp(3rem, 6vh, 5rem) 0 clamp(2rem, 4vh, 3rem);
align-items:flex-start;
}
.ed-left { max-width:920px; }
.ed-section-num {
display:inline-block;
font-family:'JetBrains Mono','Fira Code',monospace;
font-size:.72rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--cream-fade);
padding-bottom:.55rem;
margin-bottom:1.6rem;
border-bottom:1px solid var(--rule);
opacity:0;
animation:edFadeIn 1s ease .25s forwards;
}
/* Headline — Fraunces variable serif */
.ed-hero h1.ed-headline {
font-family:'Fraunces', Georgia, 'Times New Roman', serif !important;
font-weight:900;
font-size:clamp(3.4rem, 10vw, 9.5rem);
line-height:.9;
letter-spacing:-.035em;
color:var(--cream);
margin:0;
display:flex; flex-direction:column;
gap:.05em;
text-shadow:none;
}
.ed-headline .ed-line {
display:block;
opacity:0;
transform:translateY(40px);
animation:edLetterUp 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.ed-headline .ed-line--1 { animation-delay:.3s; }
.ed-headline .ed-line--2 { animation-delay:.45s; padding-left:1.2em; }
.ed-headline .ed-line--3 { animation-delay:.75s; font-style:italic; padding-left:.5em; }
.ed-headline .ed-line--3 em {
font-style:italic;
color:var(--cream);
}
@keyframes edLetterUp {
to { opacity:1; transform:translateY(0); }
}
/* Signal red rule line between "schätzen." and "Messen." */
.ed-rule {
display:block;
width:clamp(120px, 20vw, 260px);
height:3px;
background:var(--signal);
margin:.35em 0 .45em;
margin-left:.8em;
align-self:flex-start;
transform:scaleX(0);
transform-origin:left center;
animation:edRuleIn 1s cubic-bezier(.16,1,.3,1) .65s forwards;
box-shadow:0 0 20px rgba(215,67,42,.35);
}
@keyframes edRuleIn {
to { transform:scaleX(1); }
}
/* Italic accent line */
.ed-accent {
font-family:'Fraunces', Georgia, serif;
font-style:italic;
font-weight:400;
font-size:clamp(1.05rem, 1.4vw, 1.35rem);
line-height:1.45;
color:var(--cream-dim);
max-width:540px;
margin:2rem 0 0;
padding-left:1.2em;
border-left:1px solid var(--signal);
opacity:0;
transform:translateY(14px);
animation:edFadeUp 1s cubic-bezier(.16,1,.3,1) 1.05s forwards;
}
/* CTAs — typographic underlined links, not glowing buttons */
.ed-ctas {
display:flex;
gap:clamp(1.5rem, 3vw, 3rem);
margin-top:clamp(2rem, 4vh, 3rem);
flex-wrap:wrap;
opacity:0;
transform:translateY(14px);
animation:edFadeUp 1s cubic-bezier(.16,1,.3,1) 1.2s forwards;
}
.ed-cta {
background:none; border:none; cursor:pointer;
font-family:'IBM Plex Sans','Source Sans 3',sans-serif;
font-size:.88rem;
font-weight:500;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--cream);
padding:.9rem 0;
display:inline-flex;
align-items:center;
gap:.6rem;
position:relative;
transition:gap .35s cubic-bezier(.22,1,.36,1), color .35s ease;
}
.ed-cta-arrow {
font-family:'Fraunces', serif;
font-weight:400;
font-size:1.1em;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.ed-cta::after {
content:''; position:absolute;
left:0; right:0; bottom:.2rem;
height:1px;
background:var(--cream);
transform:scaleX(.55);
transform-origin:left center;
transition:transform .5s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.ed-cta:hover {
gap:1.1rem;
}
.ed-cta:hover::after {
transform:scaleX(1);
}
.ed-cta--primary::after { background:var(--signal); transform:scaleX(1); }
.ed-cta--primary:hover .ed-cta-arrow { transform:translateX(4px); }
.ed-cta--ghost {
color:var(--cream-dim);
}
.ed-cta--ghost:hover {
color:var(--cream);
}
.ed-cta--ghost:hover .ed-cta-arrow {
transform:translate(4px, -4px);
}
.ed-cta:focus-visible {
outline:1px solid var(--signal);
outline-offset:8px;
}
/* ── RIGHT: Data column */
.ed-right {
padding-top:clamp(.5rem, 4vh, 3rem); /* push down for asymmetry */
opacity:0;
animation:edFadeUp 1.2s cubic-bezier(.16,1,.3,1) .95s forwards;
}
.ed-data-label {
display:block;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.66rem;
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--cream-fade);
padding-bottom:.6rem;
margin-bottom:1.4rem;
border-bottom:1px solid var(--rule);
}
.ed-data {
display:flex; flex-direction:column;
gap:clamp(1.1rem, 2.2vh, 1.7rem);
padding-left:1.4rem;
border-left:1px solid var(--rule);
}
.ed-datapoint {
display:flex; flex-direction:column; gap:.25rem;
position:relative;
}
.ed-datapoint::before {
content:''; position:absolute;
left:-1.4rem; top:.55em;
width:.55rem; height:1px;
background:var(--signal);
}
.ed-dp-num {
font-family:'Fraunces', Georgia, serif;
font-weight:500;
font-size:clamp(1.9rem, 2.3vw, 2.4rem);
line-height:1;
color:var(--cream);
letter-spacing:-.025em;
}
.ed-dp-num small {
font-size:.58em;
font-weight:400;
opacity:.7;
margin-left:.08em;
letter-spacing:0;
}
.ed-dp-lbl {
font-family:'JetBrains Mono', monospace;
font-size:.62rem;
font-weight:500;
color:var(--cream-fade);
letter-spacing:.12em;
text-transform:uppercase;
line-height:1.35;
margin-top:.2rem;
}
@keyframes edFadeIn {
from { opacity:0; }
to { opacity:1; }
}
@keyframes edFadeUp {
from { opacity:0; transform:translateY(14px); }
to { opacity:1; transform:translateY(0); }
}
/* ── Responsive */
@media (max-width:960px) {
.ed-hero-inner {
padding:calc(var(--nav-h) + 1.25rem) 1.25rem 1.25rem;
}
.ed-main {
grid-template-columns:1fr;
gap:2.5rem;
padding:2.5rem 0 2rem;
}
.ed-right { padding-top:0; }
.ed-headline {
font-size:clamp(2.8rem, 13vw, 4.5rem);
}
.ed-headline .ed-line--2 { padding-left:.6em; }
.ed-headline .ed-line--3 { padding-left:.3em; }
.ed-rule { margin-left:.4em; width:clamp(80px, 30vw, 140px); }
.ed-folio { font-size:.58rem; gap:.8rem; letter-spacing:.1em; }
.ed-folio-right, .ed-folio-left { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%; }
.ed-ctas { gap:1.5rem; }
.ed-cta { font-size:.78rem; }
.ed-dp-num { font-size:1.7rem; }
}
@media (prefers-reduced-motion:reduce) {
.ed-hero * { animation:none !important; opacity:1 !important; transform:none !important; }
.ed-rule { transform:scaleX(1) !important; }
}
/* ── Legacy hero subsystem removed (replaced by .hero-x) ── */
/* stats bar */
/* ── Stats bar — formal clean ── */
/* Stats bar — dynamic marquee ticker */
.stats-bar { position:relative; z-index:3; background:var(--bg1); border-top:none; border-bottom:none; overflow:hidden; }
.hero-stats-bar { position:relative; z-index:10; }
.hero-stats-bar::before, .hero-stats-bar::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.hero-stats-bar::before { left:0; background:linear-gradient(90deg, var(--bg1), transparent); }
.hero-stats-bar::after { right:0; background:linear-gradient(270deg, var(--bg1), transparent); }
/* Integrated hero stats bar — floating at the bottom of the hero section over the video */
.stats-inner { display:flex; align-items:center; gap:0; animation:stats-scroll 25s linear infinite; flex-shrink:0; width:max-content; padding:.85rem 0; }
.hero-stats-bar:hover .stats-inner { animation-play-state:paused; }
@keyframes stats-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.sb-card { display:flex; align-items:center; gap:2rem; padding:0 2.5rem; flex-shrink:0; white-space:nowrap; position:relative; }
.sb-card::after { content:'·'; color:var(--teal); font-size:1.2rem; font-weight:700; opacity:.4; position:absolute; right:0; }
.sb-icon { display:none; }
.sb-info { display:flex; align-items:center; gap:8px; }
.sb-num { font-family:var(--f-head); font-size:1.1rem; font-weight:700; color:var(--teal); line-height:1; letter-spacing:-.01em; }
.sb-num span { color:var(--teal); }
.sb-desc { font-size:.78rem; color:var(--muted); letter-spacing:.02em; text-transform:uppercase; line-height:1; }
/* ════════════════════════════════════════════════════════════════
CLIENT LOGOS BAR
════════════════════════════════════════════════════════════════ */
/* ── Trust section ── */
.trust-sec { padding:3rem 0; border-bottom:1px solid var(--b); overflow:hidden; position:relative; }
.trust-sec::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--bg1) 0%, rgba(77,206,175,.02) 50%, var(--bg1) 100%); pointer-events:none; }
.trust-head { text-align:center; padding:0 2.5rem; margin-bottom:2rem; position:relative; z-index:1; }
.trust-lbl { font-size:.75rem; color:var(--teal); letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom:.6rem; }
.trust-title { font-family:var(--f-head); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:600; color:#f8f8e0; line-height:1.4; }
.trust-title span { color:var(--teal); }
/* marquee track */
.trust-marquee { display:flex; overflow:hidden; position:relative; z-index:1; }
.trust-marquee::before, .trust-marquee::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.trust-marquee::before { left:0; background:linear-gradient(90deg, var(--bg1), transparent); }
.trust-marquee::after { right:0; background:linear-gradient(270deg, var(--bg1), transparent); }
.trust-strip { display:flex; gap:1rem; animation:trust-scroll 30s linear infinite; flex-shrink:0; padding:0 .5rem; }
.trust-marquee:hover .trust-strip { animation-play-state:paused; }
@keyframes trust-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trust-chip { display:flex; align-items:center; gap:10px; padding:10px 20px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); white-space:nowrap; transition:all .3s ease; flex-shrink:0; }
.trust-chip:hover { background:rgba(77,206,175,.06); border-color:rgba(77,206,175,.15); transform:translateY(-1px); }
.trust-chip-icon { width:36px; height:36px; border-radius:8px; background:rgba(77,206,175,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-chip-icon svg { width:18px; height:18px; color:var(--teal); }
.trust-chip-text { display:flex; flex-direction:column; gap:1px; }
.trust-chip-name { font-size:.92rem; font-weight:600; color:#f8f8e0; }
.trust-chip-role { font-size:.72rem; color:rgba(255,255,255,.35); letter-spacing:.04em; }
/* bottom stats line */
.trust-bottom { display:flex; align-items:center; justify-content:center; gap:2.5rem; padding:1.5rem 2.5rem 0; position:relative; z-index:1; }
.trust-stat { text-align:center; }
.trust-stat-v { font-family:var(--f-mono); font-size:1.1rem; font-weight:700; color:var(--teal); }
.trust-stat-l { font-size:.7rem; color:rgba(255,255,255,.35); letter-spacing:.06em; text-transform:uppercase; }
/* ════════════════════════════════════════════════════════════════
DATA STRIP — flowing stats marquee above disc-sec
════════════════════════════════════════════════════════════════ */
.data-strip {
position:relative;
overflow:hidden;
padding:1.5rem 0;
background:var(--bg);
}
/* Gradient fade mask — dissolves toward the left (into heading below) */
.data-strip::before {
content:''; position:absolute; inset:0;
background:linear-gradient(90deg,
rgba(8,10,14,1) 0%,
rgba(8,10,14,.85) 8%,
transparent 25%,
transparent 75%,
rgba(8,10,14,.85) 92%,
rgba(8,10,14,1) 100%);
z-index:2; pointer-events:none;
}
/* Subtle top-edge glow */
.data-strip::after {
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,
transparent 0%,
rgba(93,239,149,.12) 20%,
rgba(93,239,149,.25) 50%,
rgba(38,132,233,.12) 80%,
transparent 100%);
z-index:3; pointer-events:none;
}
.data-strip-track {
display:flex; align-items:center;
gap:clamp(2rem, 4vw, 3.5rem);
width:max-content;
animation:dataFlow 28s linear infinite;
}
@keyframes dataFlow {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
.data-strip:hover .data-strip-track {
animation-play-state:paused;
}
.data-strip-item {
display:inline-flex; align-items:center; gap:clamp(.6rem, 1vw, 1rem);
white-space:nowrap;
flex-shrink:0;
}
.data-strip-val {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1.4rem, 2vw, 1.8rem);
font-weight:900;
line-height:1;
letter-spacing:-.02em;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 60%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.data-strip-lbl {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:clamp(.6rem, .72vw, .7rem);
font-weight:600;
color:rgba(248,248,224,.45);
letter-spacing:.12em;
text-transform:uppercase;
}
.data-strip-dot {
width:3px; height:3px; border-radius:50%;
background:rgba(93,239,149,.4);
flex-shrink:0;
}
@media(max-width:768px){
.data-strip { padding:1rem 0; }
.data-strip-track { gap:1.5rem; animation-duration:20s; }
}
@media(prefers-reduced-motion:reduce){
.data-strip-track { animation:none; }
}
/* ════════════════════════════════════════════════════════════════
LIGHT TESTIMONIALS SECTION
════════════════════════════════════════════════════════════════ */
.testi-light { background:var(--bg); padding:clamp(4.75rem, 8vw, 7rem) 2.5rem; border-top:1px solid var(--bg3); border-bottom:1px solid var(--bg3); }
.testi-light .lbl { color:#5def95; }
.testi-light .ttl { color:var(--text); }
.testi-light .testi { background:var(--bg-card); border:1px solid var(--b); border-radius:16px; box-shadow:none; }
.testi-light .testi:hover { border-color:var(--b2); box-shadow:0 8px 32px rgba(0,0,0,.3); }
.testi-light .testi blockquote { color:var(--muted); }
.testi-light .testi-name { color:var(--text); }
.testi-light .testi-role { color:var(--dim); }
.testi-light .testi-note { color:var(--dim); }
/* contact trust sidebar */
.contact-trust-item { display:flex; align-items:flex-start; gap:12px; padding:1rem 0; border-bottom:1px solid var(--b); }
.contact-trust-item:last-child { border-bottom:none; }
.contact-trust-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-trust-icon svg { width:18px; height:18px; }
@media (max-width:768px) {
.trust-sec { padding:2rem 0; }
.trust-head { padding:0 1.25rem; margin-bottom:1.5rem; }
.trust-bottom { gap:1.5rem; padding:1.2rem 1.25rem 0; flex-wrap:wrap; }
.trust-chip { padding:8px 14px; }
.trust-chip-icon { width:30px; height:30px; }
.trust-chip-name { font-size:.7rem; }
.testi-light { padding:3.5rem 1.25rem; }
}
@media (max-width:480px) {
}
/* ════════════════════════════════════════════════════════════════
INTRO / PILLARS
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
DISCIPLINES SECTION — Sticky-scroll showcase (Imperial Shine style)
Card on left pins and swaps · Image on right swaps in sync
════════════════════════════════════════════════════════════════ */
.disc-sec {
position:relative;
padding:0;
margin:0;
background:var(--bg);
/* NO overflow:hidden — it breaks position:sticky inside */
}
/* Thin brand gradient bridge from hero */
.disc-sec::before {
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,
transparent 0%,
rgba(93,239,149,.18) 15%,
rgba(93,239,149,.35) 50%,
rgba(38,132,233,.18) 85%,
transparent 100%);
z-index:10; pointer-events:none;
}
/* Section header — "OUR SERVICES" top band
Aligned to the standard .lbl eyebrow style used across every other section
(hero, sectors, refs, trust, testimonials) — same font, size, color, tracking. */
.disc-header {
max-width:1400px;
margin:0 auto;
padding:4.75rem 2.5rem 4.75rem;
font-size:.82rem; font-weight:600;
color:#5def95;
letter-spacing:.12em; text-transform:uppercase;
display:flex; align-items:center; gap:10px;
}
.disc-header-icon {
color:#5def95;
font-size:.9rem;
line-height:1;
}
.disc-heading {
max-width:1400px;
margin:0 auto;
padding:0 2.5rem;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.4rem, 5.5vw, 5.2rem);
font-weight:900;
line-height:1.02;
letter-spacing:-.035em;
color:#f8f8e0;
}
.disc-heading em {
font-family:inherit;
font-style:normal;
font-weight:900;
color:#2a9d8f;
background:none;
-webkit-text-fill-color:#2a9d8f;
display:inline-block;
}
/* Pagination dots — slide progress indicator between heading and panel */
.disc-dots {
display:flex; align-items:center; gap:.75rem;
padding:0 5vw 1.75rem;
}
.disc-dot {
width:28px; height:3px;
border-radius:2px;
background:rgba(248,248,224,.18);
transition:width .7s cubic-bezier(.22,1,.36,1), background .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
cursor:pointer;
}
.disc-dot.is-active {
width:52px;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 100%);
box-shadow:0 0 12px rgba(93,239,149,.4);
}
.disc-sec[data-active="1"] .disc-dot.is-active {
background:linear-gradient(90deg, #5def95 0%, #2684e9 100%);
box-shadow:0 0 12px rgba(93,239,149,.4);
}
/* ── Scroll-triggered entrance stagger for disc-sec ── */
.disc-header, .disc-heading, .disc-dots, .disc-panel {
opacity:0; transform:translateY(28px);
transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
.disc-panel { transform:translateY(36px) scale(.98); transition-duration:1.1s; }
/* ═══════════════════════════════════════════════════════════
STRIKE-THROUGH MANIFESTO — Option 8
"Viele Anbieter." → [strikethrough] → "Zwei Disziplinen. Ein Partner."
Matches hero's "Nicht schätzen. Messen." negation→affirmation pattern
═══════════════════════════════════════════════════════════ */
.disc-manifesto {
position:relative;
max-width:1200px;
margin:0 auto;
padding:0 clamp(1.5rem, 3vw, 2.5rem);
}
.disc-manifesto-strike {
position:relative;
display:inline-block;
font-family:'Fraunces', Georgia, 'Times New Roman', serif;
font-style:italic; font-weight:400;
font-size:clamp(1.35rem, 2.4vw, 2rem);
color:rgba(248,248,224,.42);
letter-spacing:-.008em;
margin-bottom:clamp(.5rem, 1.2vw, 1rem);
padding-right:.15em;
opacity:0;
transform:translateY(18px);
transition:opacity .8s cubic-bezier(.22,1,.36,1),
transform .8s cubic-bezier(.22,1,.36,1);
}
/* The strike line itself — draws across the word */
.disc-strike-line {
position:absolute;
top:calc(50% + 2px); left:0;
width:0; height:2px;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
box-shadow:0 0 10px rgba(63,180,195,.55), 0 0 3px rgba(93,239,149,.75);
transform-origin:left center;
transition:width 1.1s cubic-bezier(.22,1,.36,1);
pointer-events:none;
border-radius:2px;
}
/* Reveal sequence on scroll */
.disc-sec.is-revealed .disc-manifesto-strike {
opacity:1;
transform:translateY(0);
transition-delay:.1s;
}
.disc-sec.is-revealed .disc-strike-line {
width:100%;
transition-delay:.9s;
}
/* Make the main heading reveal AFTER the strike completes */
.disc-sec .disc-heading { transition-delay:0s; }
.disc-sec.is-revealed .disc-heading {
transition-delay:.15s !important;
}
/* Reduced motion — show final state instantly */
@media (prefers-reduced-motion:reduce) {
.disc-manifesto-strike { opacity:1 !important; transform:none !important; }
.disc-strike-line { width:100% !important; transition:none !important; }
.disc-sec.is-revealed .disc-heading { transition-delay:0s !important; }
}
/* Mobile tuning */
@media (max-width:600px) {
.disc-manifesto-strike {
font-size:clamp(1.1rem, 5.5vw, 1.5rem);
margin-bottom:.35rem;
}
.disc-strike-line { height:1.5px; }
}
/* ═══════════════════════════════════════════════════════════
DISCIPLINE BENTO GRID — Option 1 replacement
2 large cards side-by-side, each discipline with rich content
═══════════════════════════════════════════════════════════ */
.disc-bento {
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(1rem, 1.5vw, 1.4rem);
max-width:1400px;
margin:clamp(3rem, 5vw, 4.75rem) auto;
padding:0 clamp(1rem, 3vw, 2.5rem);
}
.disc-bento-card {
position:relative;
border-radius:28px;
overflow:hidden;
border:1px solid rgba(248,248,224,.08);
background:rgba(8,10,14,.55);
cursor:pointer;
transition:transform .5s cubic-bezier(.22,1,.36,1),
border-color .5s cubic-bezier(.22,1,.36,1),
box-shadow .5s cubic-bezier(.22,1,.36,1);
display:flex; flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.disc-bento-card::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit; padding:1px;
background:linear-gradient(160deg, rgba(93,239,149,.6) 0%, rgba(63,180,195,.45) 35%, rgba(38,132,233,.25) 70%, transparent 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0;
transition:opacity .5s ease;
pointer-events:none;
z-index:4;
}
.disc-bento-card:hover {
transform:translateY(-5px);
border-color:rgba(248,248,224,.14);
box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 80px rgba(93,239,149,.12);
}
.disc-bento-card:hover::before { opacity:1; }
.disc-bento-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
.disc-bento-bg img {
width:100%; height:100%;
object-fit:cover;
display:block;
transition:transform 1s cubic-bezier(.22,1,.36,1), filter 1s ease;
transform:scale(1.02);
filter:brightness(.7) saturate(1.05);
}
.disc-bento-card:hover .disc-bento-bg img {
transform:scale(1);
filter:brightness(.78) saturate(1.12);
}
.disc-bento-tint {
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(8,10,14,.35) 0%, rgba(8,10,14,.12) 35%, rgba(8,10,14,.85) 72%, rgba(8,10,14,.97) 100%),
linear-gradient(135deg, rgba(12,28,24,.25) 0%, transparent 50%);
z-index:1;
}
.disc-bento-content {
position:relative; z-index:2;
padding:clamp(1.9rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
flex:1;
display:flex; flex-direction:column;
justify-content:flex-start;
gap:clamp(1.9rem, 2.8vw, 2.5rem);
}
.disc-bento-top {
display:flex; align-items:flex-start; justify-content:space-between;
gap:1rem;
margin-bottom:auto;
}
.disc-bento-num {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.4rem, 3.5vw, 3.2rem);
font-weight:900;
line-height:1; letter-spacing:-.04em;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 2px 12px rgba(93,239,149,.3));
}
.disc-bento-meta {
display:inline-flex; align-items:center; gap:.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.64rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:rgba(248,248,224,.85);
padding:.42rem .9rem;
border-radius:999px;
background:rgba(0,0,0,.55);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border:1px solid rgba(93,239,149,.25);
white-space:nowrap;
}
.disc-bento-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.6rem, 4.4vw, 4rem);
font-weight:900; line-height:1;
letter-spacing:-.035em;
margin:0; padding:0;
color:#f8f8e0;
background:none;
-webkit-background-clip:initial; -webkit-text-fill-color:currentColor; background-clip:initial;
filter:drop-shadow(0 2px 18px rgba(0,0,0,.45));
text-wrap:balance;
}
.disc-bento-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(1.02rem, 1.2vw, 1.15rem); line-height:1.4;
color:rgba(248,248,224,.86);
margin:0; padding:0;
max-width:500px;
text-wrap:pretty;
text-box-trim:trim-both; text-box-edge:cap alphabetic;
}
.disc-bento-stats { display:flex; gap:.4rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.disc-bento-stat {
display:inline-flex; align-items:center; gap:.35rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.65rem; font-weight:500;
color:rgba(248,248,224,.75);
letter-spacing:.08em; text-transform:uppercase;
padding:.36rem .8rem;
border-radius:999px;
border:1px solid rgba(248,248,224,.12);
background:rgba(255,255,255,.03);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.disc-bento-stat b {
font-weight:800;
background:linear-gradient(135deg, #5def95, #3fb4c3);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.disc-bento-svc-label {
display:block;
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:1.05rem; font-weight:600;
line-height:1;
color:#5def95;
letter-spacing:.005em;
margin:0; padding:0;
opacity:.95;
}
/* Service tiles — editorial-tech glass cards with monospaced index.
2-col grid, hairline border, mint underline reveals on hover. */
.disc-bento-services {
display:flex; flex-direction:column;
gap:.55rem;
margin:0;
max-width:320px;
counter-reset:svc;
}
.disc-bento-svc {
--svc-fill:#5def95;
--svc-fill-hi:#7df0a5;
--svc-ink:#0a1a14;
counter-increment:svc;
position:relative;
display:flex; align-items:center;
width:100%; min-height:62px;
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:1.1rem; font-weight:800;
letter-spacing:-.018em; line-height:1.1;
color:var(--svc-ink);
padding:0;
border-radius:12px;
background:linear-gradient(155deg, var(--svc-fill-hi) 0%, var(--svc-fill) 65%, var(--svc-fill) 100%);
border:1px solid var(--svc-fill);
text-align:left;
cursor:pointer;
text-shadow:none;
transition:filter .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
overflow:hidden; user-select:none;
isolation:isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
0 4px 14px -6px rgba(0,0,0,.35);
}
/* Leading index column — center of gravity, vertical hairline divider */
.disc-bento-svc::before {
content:counter(svc, decimal-leading-zero);
flex:0 0 42px;
align-self:stretch;
display:flex; align-items:center; justify-content:center;
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:.7rem; font-weight:500;
letter-spacing:.1em;
color:rgba(10,26,20,.55);
border-right:1px solid rgba(10,26,20,.18);
z-index:2;
transition:color .25s, background .25s;
}
/* Service name */
.disc-bento-svc > span { flex:1; padding:0 14px; z-index:2; position:relative; }
/* Arrow */
.disc-bento-svc svg {
width:14px; height:14px; flex-shrink:0;
color:var(--svc-ink); opacity:.55;
margin-right:14px;
z-index:2; position:relative;
transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s;
}
.disc-bento-svc:hover {
filter:brightness(1.05);
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 14px 32px -10px rgba(0,0,0,.45),
0 0 0 1px var(--svc-fill);
}
.disc-bento-svc:hover::before { color:rgba(10,26,20,.85); }
.disc-bento-svc:hover svg { opacity:1; transform:translateX(3px); }
.disc-bento-svc:active { transform:translateY(0); transition:all .1s; }
.disc-bento-cta {
display:flex; align-items:center; justify-content:flex-end; gap:.55rem;
width:100%;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:1.05rem; font-weight:700;
letter-spacing:.18em; text-transform:uppercase;
color:rgba(248,248,224,.95);
padding:0;
background:transparent;
border:none;
border-radius:0;
cursor:pointer;
text-align:right;
margin:0;
line-height:1;
transition:color .25s ease, border-color .25s ease, padding .25s ease;
}
.disc-bento-cta:hover {
color:#5def95;
border-top-color:rgba(93,239,149,.5);
}
.disc-bento-cta svg {
width:42px; height:14px;
flex-shrink:0;
overflow:visible;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.disc-bento-cta svg .arrow-shaft {
transform-origin:left center;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.disc-bento-cta svg .arrow-head {
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.disc-bento-cta:hover svg .arrow-shaft { transform:scaleX(1.18); }
.disc-bento-cta:hover svg .arrow-head { transform:translateX(8px); }
.disc-bento-cta:hover svg .arrow-tail { transform:scale(1.4); }
.disc-bento-cta svg .arrow-tail {
transform-origin:center;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.disc-bento-card:focus-visible,
.disc-bento-svc:focus-visible,
.disc-bento-cta:focus-visible {
outline:2px solid #5def95;
outline-offset:3px;
}
@media (prefers-reduced-motion:reduce) {
.disc-bento-card { transition:none; }
.disc-bento-card:hover { transform:none; }
.disc-bento-bg img { transition:none; transform:none; }
.disc-bento-cta:hover { transform:none; }
}
@media (max-width:1024px) and (min-width:900px) {
.disc-bento-card { }
}
@media (max-width:900px) {
.disc-bento {
grid-template-columns:1fr;
gap:1rem;
padding:0 1rem;
}
.disc-bento-title { font-size:clamp(2.1rem, 8vw, 2.9rem); margin:0; line-height:1.04; letter-spacing:-.03em; }
.disc-bento-desc { font-size:.98rem; line-height:1.55; }
.disc-bento-num { font-size:2.2rem; }
.disc-bento-meta { font-size:.55rem; padding:.35rem .75rem; }
.disc-bento-services { max-width:100%; }
.disc-bento-svc { font-size:.9rem; padding:.78rem .9rem .75rem; min-height:72px; }
}
/* Hide old scroll wrap when bento mode active */
.disc-sec.disc-sec--bento .disc-scroll-wrap,
.disc-sec.disc-sec--bento .disc-dots { display:none !important; }
.disc-sec.is-revealed .disc-header { opacity:1; transform:translateY(0); transition-delay:.05s; }
.disc-sec.is-revealed .disc-heading { opacity:1; transform:translateY(0); transition-delay:.15s; }
.disc-sec.is-revealed .disc-dots { opacity:1; transform:translateY(0); transition-delay:.3s; }
.disc-sec.is-revealed .disc-panel { opacity:1; transform:translateY(0) scale(1); transition-delay:.25s; }
/* Scroll wrapper — 200vh for 2 slides × 100vh of scroll room */
.disc-scroll-wrap {
position:relative;
height:calc(200vh + 80px);
}
/* The sticky container — pins at the top as user scrolls */
.disc-sticky {
position:sticky;
top:0;
height:100vh;
min-height:720px;
overflow:hidden;
padding:clamp(1.5rem, 3vh, 3rem) 5vw clamp(1.5rem, 3vh, 3rem);
box-sizing:border-box;
}
.disc-row {
display:flex;
align-items:center;
justify-content:center;
height:100%;
max-width:1500px;
margin:0 auto;
}
/* ── Panel: full width, holds image-backed slides; brand-accented border matches the card */
.disc-panel {
position:relative;
width:100%;
height:100%;
max-height:780px;
border-radius:32px;
overflow:hidden;
isolation:isolate;
background:var(--bg1);
/* Base border — fades between slides */
border:1px solid rgba(93,239,149,.28);
border-top:1px solid rgba(93,239,149,.5);
box-shadow:
0 40px 100px rgba(0,0,0,.65),
0 0 0 1px rgba(93,239,149,.14),
0 0 100px rgba(93,239,149,.2),
inset 0 1px 0 rgba(255,255,255,.16);
transition:
transform .9s cubic-bezier(.22,1,.36,1),
box-shadow 1.2s cubic-bezier(.22,1,.36,1),
border-color 1.2s cubic-bezier(.22,1,.36,1),
border-top-color 1.2s cubic-bezier(.22,1,.36,1);
transform:translateY(0) scale(1);
}
/* Active Geotechnik — mint-teal glow */
.disc-sec[data-active="0"] .disc-panel {
border-color:rgba(93,239,149,.32);
border-top-color:rgba(93,239,149,.6);
box-shadow:
0 40px 100px rgba(0,0,0,.65),
0 0 0 1px rgba(93,239,149,.16),
0 0 140px rgba(93,239,149,.28),
0 0 60px rgba(93,239,149,.14),
inset 0 1px 0 rgba(255,255,255,.18);
}
/* Active Reality Capture — teal-blue glow */
.disc-sec[data-active="1"] .disc-panel {
border-color:rgba(93,239,149,.36);
border-top-color:rgba(93,239,149,.62);
box-shadow:
0 40px 100px rgba(0,0,0,.65),
0 0 0 1px rgba(93,239,149,.18),
0 0 140px rgba(38,132,233,.32),
0 0 60px rgba(93,239,149,.16),
inset 0 1px 0 rgba(255,255,255,.18);
}
/* Subtle "breathe" lift during slide transitions */
.disc-sec[data-transitioning="1"] .disc-panel {
transform:translateY(-4px) scale(1.004);
}
/* Individual slide — stacked absolutely; JS sets opacity/transform via inline style for
butter-smooth scroll-linked cross-fade (no transition = no jerk) */
.disc-slide {
position:absolute;
inset:0;
display:block;
opacity:0; /* default — JS takes over on first update */
pointer-events:none;
z-index:2;
color:#f8f8e0;
will-change:transform, opacity;
}
/* Slide 0 starts visible before JS takes over */
.disc-slide[data-slide="0"] {
opacity:1;
}
.disc-slide.is-active {
pointer-events:auto;
z-index:3;
}
/* SLIDE BACKGROUND — full image that fills the card */
.disc-slide-bg {
position:absolute; inset:0;
overflow:hidden;
z-index:1;
}
.disc-slide-bg img {
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
display:block;
transform:scale(1.02);
/* No CSS transition — scroll-linked parallax JS sets transform directly each frame */
will-change:transform;
}
/* Subtle tint — keeps image clearly visible, adds just a hint of brand color */
.disc-slide-tint {
position:absolute; inset:0; z-index:2; pointer-events:none;
mix-blend-mode:normal;
}
.disc-slide[data-disc="geo"] .disc-slide-tint {
background:
radial-gradient(ellipse 70% 60% at 20% 85%, rgba(28,139,125,.28) 0%, transparent 55%),
linear-gradient(135deg, rgba(0,0,0,.25) 0%, transparent 45%, rgba(0,0,0,.2) 100%);
}
.disc-slide[data-disc="rc"] .disc-slide-tint {
background:
radial-gradient(ellipse 70% 60% at 20% 85%, rgba(38,132,233,.28) 0%, transparent 55%),
linear-gradient(135deg, rgba(0,0,0,.25) 0%, transparent 45%, rgba(0,0,0,.2) 100%);
}
/* Vignette — light, gradient bar handles the bottom; just top corners + subtle edge */
.disc-slide-vignette {
position:absolute; inset:0; z-index:3; pointer-events:none;
background:
linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 30%, transparent 100%);
}
/* CONTENT — full-width cinematic bottom gradient bar (A3 layout + E3 solid, no glass) */
.disc-slide-content {
position:absolute;
left:0; right:0; bottom:0;
width:auto;
height:auto;
z-index:4;
padding:clamp(4rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4.5rem) clamp(1.8rem, 3vw, 2.5rem);
display:flex; flex-direction:column;
border-radius:0;
backdrop-filter:none;
-webkit-backdrop-filter:none;
transform-origin:bottom center;
overflow:visible;
transition:transform .5s cubic-bezier(.22,1,.36,1);
}
/* GEOTECHNIK — bottom-to-transparent gradient (E3 solid, no glass) */
.disc-slide[data-disc="geo"] .disc-slide-content {
background:linear-gradient(to top,
rgba(10,26,20,.97) 0%,
rgba(10,26,20,.93) 20%,
rgba(10,26,20,.7) 50%,
rgba(10,26,20,.25) 75%,
transparent 100%);
border:none;
box-shadow:none;
}
/* REALITY CAPTURE — bottom-to-transparent gradient (E3 solid, no glass) */
.disc-slide[data-disc="rc"] .disc-slide-content {
background:linear-gradient(to top,
rgba(6,16,32,.97) 0%,
rgba(6,16,32,.93) 20%,
rgba(6,16,32,.7) 50%,
rgba(6,16,32,.25) 75%,
transparent 100%);
border:none;
box-shadow:none;
}
/* ── PREMIUM DECORATIVE LAYER — corner brackets, shimmer, grain, ghost counter ── */
.disc-slide-decor {
position:absolute; inset:0;
pointer-events:none;
overflow:hidden;
border-radius:0;
z-index:2;
}
/* Corner brackets removed — no card border in cinematic bar layout */
/* Diagonal shimmer — slowly sweeps across the card, infinite */
.disc-shimmer {
position:absolute;
top:-50%; left:-50%;
width:60%; height:200%;
background:linear-gradient(115deg,
transparent 0%,
transparent 40%,
rgba(255,255,255,.06) 48%,
rgba(255,255,255,.14) 50%,
rgba(255,255,255,.06) 52%,
transparent 60%,
transparent 100%);
transform:rotate(0);
animation:discShimmer 8s cubic-bezier(.4,0,.6,1) infinite;
mix-blend-mode:screen;
}
@keyframes discShimmer {
0% { transform:translateX(-80%) translateY(-10%); opacity:0; }
20% { opacity:1; }
80% { opacity:1; }
100% { transform:translateX(250%) translateY(10%); opacity:0; }
}
/* Grain texture — subtle film noise via radial micro-gradients */
.disc-grain {
position:absolute; inset:0;
background-image:
radial-gradient(circle at 15% 25%, rgba(255,255,255,.015) 0%, transparent 1.5%),
radial-gradient(circle at 70% 45%, rgba(255,255,255,.012) 0%, transparent 1.2%),
radial-gradient(circle at 40% 75%, rgba(255,255,255,.014) 0%, transparent 1.3%),
radial-gradient(circle at 85% 85%, rgba(255,255,255,.013) 0%, transparent 1.2%),
radial-gradient(circle at 25% 55%, rgba(0,0,0,.018) 0%, transparent 1.5%),
radial-gradient(circle at 60% 15%, rgba(0,0,0,.015) 0%, transparent 1.3%);
background-size: 180px 180px, 240px 240px, 200px 200px, 220px 220px, 190px 190px, 260px 260px;
mix-blend-mode:overlay;
opacity:.8;
}
/* Ghost counter — giant faded number in the background */
.disc-counter-ghost {
position:absolute;
right:-.08em;
bottom:-.35em;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:19rem;
font-weight:900;
line-height:.75;
letter-spacing:-.08em;
color:rgba(255,255,255,.025);
-webkit-text-stroke:1px rgba(255,255,255,.04);
pointer-events:none;
user-select:none;
z-index:0;
}
/* Subtle brand gradient line at the content boundary */
.disc-slide-content::before {
content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(93,239,149,.2) 30%, rgba(63,180,195,.3) 50%, rgba(38,132,233,.2) 70%, transparent 100%);
clip-path:inset(0 100% 0 0);
transition:clip-path 1.6s cubic-bezier(.22,1,.36,1);
z-index:5;
}
.disc-slide.is-active .disc-slide-content::before {
clip-path:inset(0 0 0 0);
transition-delay:.3s;
}
.disc-slide.is-leaving .disc-slide-content::before {
clip-path:inset(0 0 0 100%);
transition-duration:.8s;
}
/* Remove card glow — clean cinematic bar needs no glow */
.disc-slide-content::after { display:none; }
.disc-slide-body {
display:grid;
grid-template-columns:1.15fr 1fr;
grid-template-rows:auto auto;
gap:.25rem clamp(2rem, 3.5vw, 3.5rem);
align-items:start;
min-height:0;
position:relative; z-index:1;
}
.disc-slide-body .disc-slide-title { grid-column:1; grid-row:1; }
.disc-slide-body .disc-slide-desc { grid-column:1; grid-row:2; }
.disc-slide-body .disc-slide-features { grid-column:2; grid-row:1 / -1; align-self:center; }
.disc-slide-top, .disc-slide-cta { position:relative; z-index:1; }
/* Top row — meta tag left, counter right */
.disc-slide-top {
display:flex; align-items:flex-start; justify-content:space-between;
gap:1rem; margin-bottom:1.25rem;
position:relative; z-index:2;
opacity:0; transform:translateY(-14px);
transition:opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
transition-delay:0s;
}
.disc-slide.is-active .disc-slide-top {
opacity:1; transform:translateY(0);
transition-delay:.35s;
}
.disc-slide-meta {
display:inline-flex; align-items:center; gap:.55rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.7rem; font-weight:600;
color:rgba(248,248,224,.88);
letter-spacing:.16em;
text-transform:uppercase;
padding:.45rem .75rem;
background:rgba(255,255,255,.06);
border:1px solid rgba(248,248,224,.12);
border-radius:999px;
}
.disc-slide[data-disc="rc"] .disc-slide-meta {
border-color:rgba(93,239,149,.22);
}
.disc-slide-icon { color:#2a9d8f; flex-shrink:0; }
.disc-slide[data-disc="rc"] .disc-slide-icon { color:#2a9d8f; }
/* Pulsing dot before the meta text */
.disc-slide-meta::before {
content:'';
width:6px; height:6px; border-radius:50%;
background:#5def95;
box-shadow:0 0 8px #5def95, 0 0 0 3px rgba(93,239,149,.15);
animation:discMetaDot 2s ease-in-out infinite;
flex-shrink:0;
}
.disc-slide[data-disc="rc"] .disc-slide-meta::before {
background:#5def95;
box-shadow:0 0 8px #5def95, 0 0 0 3px rgba(93,239,149,.15);
}
@keyframes discMetaDot {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.5; transform:scale(1.2); }
}
/* SVG clock icons removed from HTML — pulsing dot ::before handles the indicator */
/* Counter — compact pill badge, animates on slide change.
Intentionally SMALLER than the title — title is the primary anchor. */
.disc-counter {
display:inline-flex; align-items:baseline;
font-family:'JetBrains Mono', 'Fira Code', monospace;
line-height:1;
color:#f8f8e0;
letter-spacing:-.01em;
padding:.4rem .75rem;
background:rgba(255,255,255,.06);
border:1px solid rgba(248,248,224,.12);
border-radius:999px;
backdrop-filter:blur(8px);
}
.disc-counter-current {
font-size:1.5rem;
font-weight:700;
line-height:1;
display:inline-block;
transform:translateY(12px) scale(.85);
opacity:0;
filter:blur(3px);
transition:
transform 1.1s cubic-bezier(.16,1,.3,1),
opacity 1.1s cubic-bezier(.22,1,.36,1),
filter .9s cubic-bezier(.22,1,.36,1);
transition-delay:0s;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 60%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
letter-spacing:-.02em;
}
.disc-slide[data-disc="rc"] .disc-counter-current {
background:linear-gradient(135deg, #5def95 0%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.disc-slide.is-active .disc-counter-current {
transform:translateY(0) scale(1);
opacity:1;
filter:blur(0);
transition-delay:.55s;
}
.disc-slide.is-leaving .disc-counter-current {
transform:translateY(-12px) scale(.85);
opacity:0;
filter:blur(3px);
}
.disc-counter-slash {
font-size:.8rem;
font-weight:400;
opacity:.45;
margin:0 .1em;
color:#f8f8e0;
-webkit-text-fill-color:#f8f8e0;
}
.disc-counter-total {
font-size:.8rem;
font-weight:600;
opacity:.6;
color:#f8f8e0;
-webkit-text-fill-color:#f8f8e0;
}
.disc-slide-body { position:relative; z-index:2; min-height:0; }
.disc-slide-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.8rem, 3.9vw, 3.5rem);
font-weight:900;
font-style:normal;
line-height:1.05;
letter-spacing:-.035em;
/* 1B — brand gradient text fill, industrial weight */
background:linear-gradient(135deg, #fffef5 0%, #e8fbe8 25%, #5def95 55%, #3fb4c3 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0 2px 12px rgba(93,239,149,.2));
margin:0 0 .6rem;
position:relative;
/* Choreographed entry — slow, cinematic */
opacity:0; transform:translateX(-24px);
transition:
opacity 1.3s cubic-bezier(.22,1,.36,1),
transform 1.45s cubic-bezier(.22,1,.36,1);
transition-delay:0s;
}
.disc-slide.is-active .disc-slide-title {
opacity:1; transform:translateX(0);
transition-delay:.7s;
}
.disc-slide.is-leaving .disc-slide-title {
opacity:0; transform:translateX(30px);
}
/* RC title — teal-blue gradient */
.disc-slide[data-disc="rc"] .disc-slide-title {
background:linear-gradient(135deg, #fffef5 0%, #daf0f8 25%, #5def95 55%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0 2px 12px rgba(93,239,149,.2));
}
/* Accent line under the title — brand gradient */
.disc-slide-title::after {
content:'';
position:absolute;
bottom:-.35em; left:0;
width:56px; height:3px;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 60%, #2684e9 100%);
box-shadow:0 0 10px rgba(93,239,149,.6);
border-radius:2px;
transform:scaleX(0); transform-origin:left;
transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.disc-slide.is-active .disc-slide-title::after {
transform:scaleX(1);
transition-delay:.85s;
}
/* Description — 2B: DM Sans geometric tech, 16px, bright */
.disc-slide-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(1rem, 1.15vw, 1.1rem);
line-height:1.62;
color:rgba(248,248,224,.9);
margin:1rem 0 1rem;
max-width:none;
/* Choreographed entry — slow, cinematic */
opacity:0; transform:translateX(-20px);
transition:
opacity 1.3s cubic-bezier(.22,1,.36,1),
transform 1.45s cubic-bezier(.22,1,.36,1);
transition-delay:0s;
}
.disc-slide.is-active .disc-slide-desc {
opacity:1; transform:translateX(0);
transition-delay:.85s;
}
.disc-slide.is-leaving .disc-slide-desc {
opacity:0; transform:translateX(24px);
}
/* Feature tags — horizontal pill wrap (C2) */
.disc-slide-features {
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap;
gap:.4rem;
align-content:start;
position:relative;
z-index:1;
}
.disc-feat {
display:inline-flex; align-items:center;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:clamp(.78rem, .9vw, .84rem); font-weight:500;
color:rgba(248,248,224,.84);
letter-spacing:.01em;
cursor:pointer;
padding:.38rem 1rem;
border-radius:999px;
border:1px solid rgba(248,248,224,.16);
background:rgba(255,255,255,.05);
white-space:nowrap;
opacity:0; transform:translateY(8px);
transition:
opacity .9s cubic-bezier(.22,1,.36,1),
transform .9s cubic-bezier(.22,1,.36,1),
color .22s ease,
background .22s ease,
border-color .22s ease;
position:relative;
}
.disc-slide[data-disc="rc"] .disc-feat {
border-color:rgba(93,239,149,.18);
}
.disc-slide.is-active .disc-feat { opacity:1; transform:translateY(0); }
.disc-slide.is-active .disc-feat:nth-child(1) { transition-delay:.9s; }
.disc-slide.is-active .disc-feat:nth-child(2) { transition-delay:.97s; }
.disc-slide.is-active .disc-feat:nth-child(3) { transition-delay:1.04s; }
.disc-slide.is-active .disc-feat:nth-child(4) { transition-delay:1.11s; }
.disc-slide.is-active .disc-feat:nth-child(5) { transition-delay:1.18s; }
.disc-slide.is-active .disc-feat:nth-child(6) { transition-delay:1.25s; }
.disc-slide.is-active .disc-feat:nth-child(7) { transition-delay:1.32s; }
.disc-slide.is-leaving .disc-feat { opacity:0; transform:translateY(6px); transition-delay:0s; }
.disc-feat:hover, .disc-feat:focus-visible {
color:#f8f8e0;
outline:none;
background:rgba(93,239,149,.1);
border-color:rgba(93,239,149,.45);
}
.disc-slide[data-disc="rc"] .disc-feat:hover,
.disc-slide[data-disc="rc"] .disc-feat:focus-visible {
background:rgba(93,239,149,.12);
border-color:rgba(93,239,149,.5);
}
/* Text-link CTA — uppercase tech authority (D4 + 4A) */
.disc-slide-cta {
position:relative;
right:auto; bottom:auto;
width:auto; height:auto;
display:inline-flex; flex-direction:row;
align-items:center;
align-self:flex-end;
gap:.45rem;
padding:.25rem 0;
margin-top:.75rem;
border-radius:0;
background:none;
color:#5def95;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.82rem; font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
text-align:left; line-height:1.3;
border:none; cursor:pointer;
box-shadow:none;
opacity:0; transform:translateY(8px);
transition:
transform .9s cubic-bezier(.16,1,.3,1),
opacity .9s cubic-bezier(.22,1,.36,1),
color .25s ease,
gap .3s cubic-bezier(.22,1,.36,1);
transition-delay:0s;
z-index:6;
}
.disc-slide-cta::before { display:none; }
.disc-slide-cta::after {
content:'';
position:absolute;
bottom:0; left:0;
width:0; height:1px;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 100%);
transition:width .35s cubic-bezier(.22,1,.36,1);
}
.disc-slide.is-active .disc-slide-cta {
opacity:1;
transform:translateY(0);
transition-delay:1.4s;
}
.disc-slide.is-leaving .disc-slide-cta {
opacity:0;
transform:translateY(6px);
}
.disc-slide[data-disc="rc"] .disc-slide-cta {
color:#5def95;
background:none;
box-shadow:none;
}
.disc-slide[data-disc="rc"] .disc-slide-cta::after {
background:linear-gradient(90deg, #5def95 0%, #2684e9 100%);
}
.disc-slide-cta svg {
color:currentColor; width:16px; height:16px;
transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.disc-slide-cta:hover {
color:#f8f8e0;
gap:.6rem;
}
.disc-slide-cta:hover::after {
width:100%;
}
.disc-slide[data-disc="rc"] .disc-slide-cta:hover {
color:#f8f8e0;
}
.disc-slide-cta:hover svg { transform:translate(3px, -3px); }
/* Image color grading per discipline */
.disc-slide[data-disc="geo"] .disc-slide-bg img {
filter:saturate(1.1) contrast(1.08) brightness(.9);
}
.disc-slide[data-disc="rc"] .disc-slide-bg img {
filter:saturate(1.15) contrast(1.08) brightness(.9);
}
/* Mobile / tablet: stack vertically, disable sticky, image-backed cards */
@media(max-width:960px){
.disc-header { padding:3rem 1.5rem 1rem; }
.disc-heading { padding:0 1.5rem 2rem; font-size:clamp(2rem, 8vw, 3rem); }
/* Release the sticky wrap entirely */
.disc-scroll-wrap { height:auto; }
.disc-sticky {
position:relative;
top:auto;
height:auto; min-height:0;
padding:1.5rem 1.5rem 3rem;
}
/* Flex-column layout — predictable stack order */
.disc-row {
display:flex;
flex-direction:column;
gap:1.75rem;
max-width:560px;
margin:0 auto;
height:auto;
}
/* Panel becomes a transparent wrapper, slides flatten into row */
.disc-panel {
display:contents;
}
/* Each slide becomes its own opaque card — image still as background */
.disc-slide {
position:relative;
inset:auto;
width:100%;
height:auto;
min-height:580px;
opacity:1 !important;
transform:none !important;
filter:none !important;
pointer-events:auto !important;
border-radius:24px;
box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.12);
overflow:hidden;
}
.disc-slide[data-disc="geo"] { order:1; }
.disc-slide[data-disc="rc"] { order:2; }
/* On mobile, show the image bg with a slightly darker tint for text contrast */
.disc-slide-bg img { transform:scale(1) !important; }
.disc-slide-vignette {
background:
radial-gradient(ellipse 110% 70% at 30% 50%, rgba(0,0,0,.35) 0%, transparent 75%),
linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 40%, rgba(0,0,0,.55) 100%);
}
/* Mobile: content becomes stacked below image */
.disc-slide-content {
position:relative !important;
inset:auto !important;
left:0 !important; bottom:0 !important;
width:auto !important;
height:auto !important;
min-height:auto !important;
margin:0 !important;
padding:2rem 1.75rem 2rem !important;
border-radius:0 0 22px 22px !important;
border-top:1px solid rgba(93,239,149,.25) !important;
background:linear-gradient(180deg, rgba(14,18,24,.92) 0%, rgba(10,14,20,.97) 100%) !important;
}
/* The bg image becomes a smaller visual top portion */
.disc-slide-bg {
position:relative !important;
width:100%; height:260px;
display:block;
}
.disc-slide-bg img { position:absolute; }
.disc-slide {
display:flex !important;
flex-direction:column !important;
min-height:auto !important;
}
/* Reset all child animations on mobile (no scroll-based transitions) */
.disc-slide-top, .disc-counter-current, .disc-slide-title, .disc-slide-desc, .disc-feat, .disc-slide-cta {
opacity:1 !important;
transform:none !important;
filter:none !important;
transition:none !important;
}
/* Slide internals tightened for mobile */
.disc-slide-top { margin-bottom:1.25rem; }
.disc-counter-current { font-size:clamp(2.2rem, 11vw, 3rem); }
.disc-slide-title { font-size:clamp(1.7rem, 7.5vw, 2.4rem); }
.disc-slide-desc { font-size:.92rem; line-height:1.6; margin-bottom:1.2rem; }
.disc-slide-body { display:flex !important; flex-direction:column !important; gap:.5rem !important; }
.disc-slide-features { flex-wrap:wrap; gap:.35rem; }
.disc-feat { font-size:.78rem; padding:.3rem .7rem !important; }
.disc-slide-cta {
position:relative !important;
right:auto !important; bottom:auto !important;
margin-top:1rem !important;
width:auto !important; height:auto !important;
padding:.25rem 0 !important;
align-self:flex-start !important;
font-size:.85rem !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
flex-direction:row !important;
transform:translateY(0) !important;
opacity:1 !important;
}
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
.disc-slide, .disc-panel, .disc-feat, .disc-slide-cta { transition:none !important; }
.disc-slide { opacity:1 !important; transform:none !important; }
/* Entrance stagger: show immediately */
.disc-header, .disc-heading, .disc-dots, .disc-panel {
opacity:1 !important; transform:none !important; transition:none !important;
}
}
/* keep old classes working for other pages */
.pillars { display:none; }
.pillar, .p-num, .p-icon, .pillar-list, .pillar-list li { display:revert; }
/* ════════════════════════════════════════════════════════════════
HOW IT WORKS (photogrammetry explainer)
════════════════════════════════════════════════════════════════ */
/* ── HOW IT WORKS — flowchart layout ── */
/* ════════════════════════════════════════════════════════════════
HOW IT WORKS — Sticky split showcase
Left: label + heading + stats + tabbed numbered list (sticky)
Right: image-backed step card that cross-fades as user clicks/scrolls
════════════════════════════════════════════════════════════════ */
.how-sec {
position:relative;
padding:0;
margin:0;
background:var(--bg);
}
/* Thin brand gradient bridge from the disciplines section */
.how-sec::before {
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,
transparent 0%,
rgba(93,239,149,.2) 20%,
rgba(93,239,149,.38) 50%,
rgba(38,132,233,.2) 80%,
transparent 100%);
z-index:10; pointer-events:none;
}
/* ── Scroll wrap: tall container with 300vh room for 3 steps */
.how-scroll-wrap {
position:relative;
height:calc(300vh + 120px);
}
/* ── Sticky container: pins to viewport top */
.how-sticky {
position:sticky;
top:0;
height:100vh;
min-height:680px;
overflow:hidden;
display:flex; align-items:center;
}
.how-container {
display:grid;
grid-template-columns:minmax(420px, 1fr) 1.35fr;
gap:clamp(2rem, 4vw, 4.5rem);
max-width:1500px;
width:100%;
margin:0 auto;
padding:clamp(2rem, 4vw, 4rem) 5vw;
align-items:center;
height:auto;
}
/* ── LEFT: static inside the sticky container (no longer own sticky) */
.how-left { align-self:center; }
.how-left-inner { max-width:560px; }
.how-label {
display:inline-flex; align-items:center; gap:.65rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.68rem; font-weight:700;
color:var(--teal);
letter-spacing:.26em;
text-transform:uppercase;
margin-bottom:1.75rem;
}
.how-label::before {
content:'';
display:inline-block;
width:32px; height:1px;
background:linear-gradient(90deg, rgba(93,239,149,.7) 0%, transparent 100%);
}
.how-label-dot {
width:7px; height:7px; border-radius:50%;
background:#5def95;
box-shadow:0 0 10px rgba(93,239,149,.9), 0 0 0 3px rgba(93,239,149,.15);
animation:howLabelDot 2.2s ease-in-out infinite;
}
@keyframes howLabelDot { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.2); opacity:.6} }
.how-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.05rem, 4vw, 3.4rem);
font-weight:800;
line-height:1.08;
letter-spacing:-.028em;
color:#f8f8e0;
margin:0 0 1.35rem;
text-wrap:balance;
max-width:520px;
}
.how-title em {
font-family:'Fraunces', Georgia, 'Times New Roman', serif;
font-style:italic;
font-weight:900;
font-size:1.05em;
letter-spacing:-.022em;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 55%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
padding-right:.05em;
}
.how-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(1rem, 1.15vw, 1.1rem);
line-height:1.68;
color:rgba(248,248,224,.88);
margin:0 0 2.5rem;
max-width:500px;
font-weight:400;
}
/* Inline stats row — refined: one hero metric + two quiet supporters */
.how-stats-inline {
display:flex;
gap:.5rem;
margin:.25rem 0 2.75rem;
padding:0;
position:relative;
flex-wrap:wrap;
}
.how-stat {
display:inline-flex; align-items:center; gap:.55rem;
min-width:0;
padding:.45rem 1.1rem;
border-radius:999px;
border:1px solid rgba(248,248,224,.12);
background:rgba(255,255,255,.04);
}
/* All stats — unified gradient for premium consistency */
.how-stat-val {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1.1rem, 1.5vw, 1.3rem);
font-weight:900;
line-height:1;
letter-spacing:-.02em;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 60%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
white-space:nowrap;
}
.how-stat-val small {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.65em; font-weight:700;
margin-left:.12em;
letter-spacing:.02em;
color:rgba(248,248,224,.7);
-webkit-text-fill-color:rgba(248,248,224,.7);
}
.how-stat-lbl {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.62rem; font-weight:600;
color:rgba(248,248,224,.55);
letter-spacing:.12em; text-transform:uppercase;
}
/* Tabs wrapper — clean alignment, no rail */
.how-tabs-wrap {
position:relative;
}
/* Scroll hint under the tabs — made visible enough to actually function */
.how-scroll-hint {
display:inline-flex; align-items:center; gap:.6rem;
margin-top:1.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.72rem; font-weight:600;
color:rgba(248,248,224,.6);
letter-spacing:.14em; text-transform:uppercase;
animation:howHint 3s ease-in-out infinite;
}
@keyframes howHint { 0%,100%{opacity:.6} 50%{opacity:1} }
.how-scroll-hint-dot {
display:none; /* replaced by chevron SVG */
}
.how-scroll-hint-chevron {
display:inline-block;
width:12px; height:12px;
color:rgba(93,239,149,.8);
flex-shrink:0;
animation:howChevronBounce 2s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes howChevronBounce {
0%,100% { transform:translateY(0); opacity:.6; }
50% { transform:translateY(4px); opacity:1; }
}
/* ── Scroll-triggered entrance stagger for left column + stage ── */
.how-label, .how-title, .how-desc, .how-stats-inline, .how-tabs-wrap, .how-scroll-hint, .how-stage {
opacity:0;
transform:translateY(28px);
transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
.how-stage { transform:translateY(36px) scale(.97); transition-duration:1.1s; }
.how-sec.is-revealed .how-label { opacity:1; transform:translateY(0); transition-delay:.05s; }
.how-sec.is-revealed .how-title { opacity:1; transform:translateY(0); transition-delay:.15s; }
.how-sec.is-revealed .how-desc { opacity:1; transform:translateY(0); transition-delay:.3s; }
.how-sec.is-revealed .how-stats-inline { opacity:1; transform:translateY(0); transition-delay:.45s; }
.how-sec.is-revealed .how-tabs-wrap { opacity:1; transform:translateY(0); transition-delay:.6s; }
.how-sec.is-revealed .how-scroll-hint { opacity:1; transform:translateY(0); transition-delay:.75s; }
.how-sec.is-revealed .how-stage { opacity:1; transform:translateY(0) scale(1); transition-delay:.25s; }
/* Tabbed numbered list — refined: softer dividers, wider breathing room */
.how-tabs {
list-style:none; margin:0; padding:0;
}
.how-tab {
position:relative;
display:flex; align-items:center; gap:1.4rem;
padding:1.5rem .5rem 1.5rem 0;
border-top:1px solid rgba(248,248,224,.08);
cursor:pointer;
transition:
padding-left .55s cubic-bezier(.22,1,.36,1),
background .35s cubic-bezier(.22,1,.36,1);
}
.how-tab:first-child { border-top:none; }
.how-tab::before {
content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:3px; height:0;
background:linear-gradient(180deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
box-shadow:0 0 14px rgba(93,239,149,.55);
transition:height .65s cubic-bezier(.22,1,.36,1);
border-radius:2px;
}
.how-tab.is-active {
padding-left:1.5rem;
background:linear-gradient(90deg, rgba(93,239,149,.06) 0%, transparent 70%);
border-radius:0 6px 6px 0;
}
.how-tab.is-active::before {
height:80%;
width:3.5px;
}
.how-tab-num {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:1rem; font-weight:700;
color:rgba(248,248,224,.38);
letter-spacing:.02em;
flex-shrink:0; width:34px;
transition:color .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.how-tab.is-active .how-tab-num {
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
transform:scale(1.1);
filter:drop-shadow(0 0 10px rgba(93,239,149,.45));
}
.how-tab-name {
flex:1;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1.18rem, 1.8vw, 1.5rem);
font-weight:500;
letter-spacing:-.016em;
color:rgba(248,248,224,.62);
transition:color .5s cubic-bezier(.22,1,.36,1), font-size .5s cubic-bezier(.22,1,.36,1), font-weight .5s cubic-bezier(.22,1,.36,1);
}
.how-tab.is-active .how-tab-name {
color:#f8f8e0;
font-size:clamp(1.4rem, 2.1vw, 1.8rem);
font-weight:800;
letter-spacing:-.025em;
}
.how-tab-arrow {
color:rgba(93,239,149,.4);
flex-shrink:0;
opacity:0;
transform:translateX(-10px);
transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), color .55s cubic-bezier(.22,1,.36,1);
}
.how-tab.is-active .how-tab-arrow {
opacity:1;
transform:translateX(0);
color:#5def95;
filter:drop-shadow(0 0 6px rgba(93,239,149,.5));
}
.how-tab:hover:not(.is-active) {
padding-left:.6rem;
}
.how-tab:hover:not(.is-active) .how-tab-name { color:rgba(248,248,224,.92); }
.how-tab:hover:not(.is-active) .how-tab-num { color:rgba(93,239,149,.7); }
.how-tab:hover:not(.is-active) .how-tab-arrow { opacity:.5; transform:translateX(-2px); color:rgba(93,239,149,.5); }
.how-tab:focus-visible { outline:none; }
.how-tab:focus-visible .how-tab-name { color:#f8f8e0; }
.how-tab:focus-visible::after {
content:''; position:absolute; left:-.4rem; right:-.4rem; top:.4rem; bottom:.4rem;
border:1.5px solid rgba(93,239,149,.55);
border-radius:4px;
pointer-events:none;
}
/* ── RIGHT: stage with stacked step cards */
.how-right {
position:relative;
}
.how-stage {
position:relative;
width:100%;
height:clamp(560px, 78vh, 780px);
border-radius:32px;
overflow:hidden;
isolation:isolate;
background:var(--bg1);
border:1px solid transparent;
background-clip:padding-box;
box-shadow:
0 40px 100px rgba(0,0,0,.65),
0 0 120px rgba(93,239,149,.15),
inset 0 1px 0 rgba(255,255,255,.12);
}
/* Gradient border via pseudo-element — premium tech treatment */
.how-stage::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit;
padding:1px;
background:linear-gradient(160deg, rgba(93,239,149,.5) 0%, rgba(63,180,195,.35) 30%, rgba(38,132,233,.18) 60%, transparent 80%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none;
z-index:10;
}
/* ═══════════════════════════════════════════════════════════
HOW-IT-WORKS CINEMA — full-viewport scroll-pinned frames
Replaces the split layout with Apple-style storytelling
═══════════════════════════════════════════════════════════ */
.how-cinema {
position:relative;
/* Scroll timing: cinema = 380vh, sticky = 100vh → scroll-while-pinned = 280vh.
4 frames ÷ 280vh = 70vh per card change (~630px on a 900px viewport, ~2–3 wheel notches).
Feels responsive without rushing the reader. */
height:380vh;
background:var(--bg);
}
.how-cinema-sticky {
position:sticky; top:0;
height:100vh; height:100svh;
overflow:hidden;
display:grid;
grid-template-rows:auto 1fr;
justify-items:center;
padding:clamp(3rem, 6vh, 4.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vh, 3rem);
gap:clamp(1rem, 2vh, 1.75rem);
}
/* Ambient glow — shifts per frame */
.how-cinema-glow {
position:absolute;
width:55vw; height:55vh;
border-radius:50%;
filter:blur(120px);
opacity:0; pointer-events:none;
z-index:0;
top:20%; left:20%;
transition:opacity 1.2s ease, background 1.2s ease, left 1.4s ease;
}
.how-cinema-sticky.hf1 .how-cinema-glow { opacity:1; background:rgba(93,239,149,.06); left:15%; }
.how-cinema-sticky.hf2 .how-cinema-glow { opacity:1; background:rgba(93,239,149,.07); left:40%; }
.how-cinema-sticky.hf3 .how-cinema-glow { opacity:1; background:rgba(38,132,233,.06); left:15%; }
.how-cinema-sticky.hf4 .how-cinema-glow { opacity:1; background:rgba(120,93,239,.06); left:45%; }
/* Persistent heading at top */
.how-cinema-head {
position:relative;
text-align:center; z-index:3;
width:100%;
max-width:90vw;
flex-shrink:0;
display:flex; flex-direction:column; align-items:center;
}
.how-cinema-lbl {
font-family:'JetBrains Mono', monospace;
font-size:.82rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
color:#5def95;
margin-bottom:1rem;
white-space:nowrap;
}
.how-cinema-lbl::before {
content:''; display:inline-block; width:28px; height:2px;
background:linear-gradient(90deg,#5def95,#3fb4c3);
vertical-align:middle; margin-right:.75rem;
}
.how-cinema-ttl {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.25rem, 4.2vw, 3.75rem);
font-weight:900; line-height:1.06;
letter-spacing:-.032em;
color:#f8f8e0;
margin:0;
}
.how-cinema-ttl .accent {
font-style:normal;
color:#2a9d8f;
background:none;
-webkit-text-fill-color:#2a9d8f;
}
.how-cinema-skip {
display:inline-flex; align-items:center; gap:.4rem;
margin-top:.9rem;
background:transparent;
border:1px solid rgba(248,248,224,.22);
color:rgba(248,248,224,.78);
font-family:var(--f-body); font-weight:600;
font-size:.74rem; letter-spacing:.04em;
padding:.4rem .9rem;
border-radius:var(--r-pill);
cursor:pointer;
transition:border-color var(--t), color var(--t), background var(--t), transform var(--t);
}
.how-cinema-skip:hover {
border-color:rgba(93,239,149,.55);
color:#5def95;
background:rgba(93,239,149,.06);
transform:translateY(-1px);
}
.how-cinema-skip svg { flex-shrink:0; }
@media (max-width:768px) { .how-cinema-skip { display:none; } }
/* Frame slides — stacked via grid */
.how-frames {
position:relative;
display:grid; place-items:stretch;
grid-template-columns:1fr;
grid-template-rows:1fr;
width:100%; max-width:1180px;
height:100%;
max-height:clamp(420px, 60vh, 580px);
align-self:center;
justify-self:center;
z-index:2;
min-height:0;
}
.how-frame {
grid-area:1/1;
/* Card-style container — chrome header, body, footer */
display:grid;
grid-template-rows:1fr;
grid-template-areas:
"text visual";
grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
column-gap:clamp(1.5rem, 3vw, 2.75rem);
row-gap:clamp(1rem, 2vh, 1.75rem);
align-items:stretch;
width:100%;
height:100%;
padding:clamp(1.25rem, 2vw, 1.75rem);
border-radius:24px;
background:linear-gradient(180deg, rgba(14,18,24,.55) 0%, rgba(10,14,20,.6) 100%);
border:1px solid rgba(93,239,149,.22);
border-top-color:rgba(93,239,149,.35);
box-shadow:
0 40px 100px rgba(0,0,0,.55),
0 0 0 1px rgba(93,239,149,.08),
0 0 120px rgba(93,239,149,.12),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
overflow:hidden;
opacity:0;
transform:translateY(18px) scale(.985);
transition:opacity .32s cubic-bezier(.33,1,.68,1),
transform .42s cubic-bezier(.33,1,.68,1);
pointer-events:none;
will-change:opacity, transform;
}
/* Card chrome — premium header strip, step number + label + live status */
.how-frame-chrome {
grid-area:chrome;
display:flex; align-items:center; justify-content:space-between;
gap:1.25rem;
padding:1.15rem clamp(1.4rem, 2.2vw, 1.9rem) 1.15rem clamp(1.4rem, 2.2vw, 1.9rem);
margin:calc(-1 * clamp(1rem, 2vh, 1.5rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) 0;
background:
linear-gradient(180deg, rgba(22,28,36,.72) 0%, rgba(14,18,24,.42) 100%),
radial-gradient(120% 180% at 0% 0%, rgba(93,239,149,.08), transparent 55%);
border-bottom:none;
position:relative;
}
.how-frame-chrome::after { content:none; }
.how-frame-chrome-step {
display:inline-flex; align-items:baseline; gap:.85rem;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1rem, 1.15vw, 1.18rem);
font-weight:600;
letter-spacing:-.005em;
line-height:1;
color:rgba(248,248,224,.94);
}
.how-frame-chrome-step::before {
/* remove the hairline bar — replaced by number prefix */
content:none;
}
.how-frame-chrome-step .hfc-num {
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:.82em;
font-weight:700;
letter-spacing:.02em;
padding:.32rem .55rem;
border-radius:6px;
background:linear-gradient(180deg, rgba(93,239,149,.16), rgba(63,180,195,.1));
border:1px solid rgba(93,239,149,.32);
color:#5def95;
line-height:1;
position:relative; top:-.04em;
}
.how-frame-chrome-step .hfc-sep {
display:inline-block;
width:18px; height:1px;
background:linear-gradient(90deg, rgba(93,239,149,.55), rgba(63,180,195,.2));
position:relative; top:-.28em;
}
.how-frame-chrome-step .hfc-label {
font-style:italic;
font-family:'Fraunces', Georgia, serif;
font-weight:400;
font-size:1.02em;
letter-spacing:-.01em;
color:rgba(248,248,224,.82);
}
.how-frame-chrome-status {
display:inline-flex; align-items:center; gap:.55rem;
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:.72rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(93,239,149,.92);
padding:.42rem .8rem .42rem .75rem;
border-radius:999px;
background:rgba(93,239,149,.08);
border:1px solid rgba(93,239,149,.22);
}
.how-frame-chrome-status::before {
content:''; width:7px; height:7px; border-radius:50%;
background:#5def95; box-shadow:0 0 10px rgba(93,239,149,.85), 0 0 2px rgba(93,239,149,1);
animation:frameDotPulse 2.2s ease-in-out infinite;
}
@keyframes frameDotPulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.55; transform:scale(.85); }
}
/* Body columns — reassigned grid areas */
.how-frame-text { grid-area:text; }
.how-frame-visual { grid-area:visual; }
/* Footer strip — pills as horizontal metrics bar */
.how-frame-feats {
grid-area:footer;
margin:0;
padding:0;
border-top:none;
background:none;
gap:.55rem !important;
justify-content:flex-start;
align-items:center;
flex-wrap:wrap;
row-gap:.5rem;
}
.how-frame.active {
opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.how-frame.exit-up { opacity:0; transform:translateY(-14px) scale(.985); }
/* Frame text column */
.how-frame-text {
max-width:520px;
align-self:center;
display:flex; flex-direction:column; justify-content:center;
min-height:0;
overflow:hidden;
}
/* ── Step number + stage (track moved to global top bar) ── */
.how-frame-num {
position:relative;
display:grid;
grid-template-columns:auto auto 1px auto;
align-items:end;
gap:.65rem;
margin-bottom:1.5rem;
width:max-content;
}
.how-step-track { display:none !important; }
/* ══════════ Cinema progress bar — numbered circles on a line ══════════ */
.how-cinema-progress {
position:relative;
width:min(640px, 86vw);
margin:1.5rem auto 0;
height:56px;
pointer-events:none;
}
.hcp-track {
position:absolute; left:0; right:0; top:50%;
height:2px; transform:translateY(-50%);
background:rgba(93,239,149,.16);
border-radius:2px;
}
.hcp-fill {
position:absolute; left:0; top:50%;
height:2px; transform:translateY(-50%);
background:rgba(93,239,149,.55);
border-radius:2px;
width:0;
transition:none;
}
.hcp-step {
position:absolute; left:var(--p); top:50%;
transform:translate(-50%, -50%);
pointer-events:none;
z-index:3;
}
/* The circle itself — sized big enough to hold the number.
--near (0..1) is set per-step by JS to drive a smooth scroll-linked scale/glow. */
.hcp-step { --near:0; }
.hcp-dot {
display:grid; place-items:center;
width:42px; height:42px; border-radius:50%;
background:#0a0c10;
border:1.5px solid rgba(93,239,149,.35);
box-shadow:0 0 0 4px #0a0c10, 0 0 calc(28px * var(--near)) rgba(93,239,149, calc(.7 * var(--near)));
transform:scale(calc(1 + .22 * var(--near)));
transition:border-color .25s ease, background .25s ease;
will-change:transform, box-shadow;
}
.hcp-num {
font-family:'JetBrains Mono', monospace;
font-size:.78rem; font-weight:700;
letter-spacing:.04em;
color:rgba(248,248,224,.55);
transition:color .25s ease;
}
.hcp-step .hcp-dot { /* nothing extra — hcp-num is inside via structure */ }
/* Put num inside dot (structure change happens in JSX; here we rely on .hcp-step > .hcp-dot + .hcp-num visually stacked — adjust .hcp-num to be centered inside circle) */
/* Fill widths per active frame — step centers at 12.5 / 37.5 / 62.5 / 87.5 */
/* Fill width is now driven continuously by JS (scroll-linked). Keep a safe fallback: */
.how-cinema-sticky.hf1 .hcp-fill:not([style*="width"]) { width:12.5%; }
.how-cinema-sticky.hf2 .hcp-fill:not([style*="width"]) { width:37.5%; }
.how-cinema-sticky.hf3 .hcp-fill:not([style*="width"]) { width:62.5%; }
.how-cinema-sticky.hf4 .hcp-fill:not([style*="width"]) { width:87.5%; }
/* Active step — filled mint, dark number (scale is driven by --near, scroll-linked) */
.hcp-step.is-active .hcp-dot {
background:#5def95;
border-color:#5def95;
}
.hcp-step.is-active .hcp-num { color:#0a0c10; }
/* Completed step — teal outline + teal number */
.hcp-step.is-done .hcp-dot {
background:#0a0c10;
border-color:#2a9d8f;
box-shadow:0 0 0 4px #0a0c10, inset 0 0 0 999px rgba(42,157,143,.14);
}
.hcp-step.is-done .hcp-num { color:#2a9d8f; }
[data-theme="light"] .hcp-track { background:rgba(26,26,30,.14); }
[data-theme="light"] .hcp-fill { background:rgba(42,157,143,.55); box-shadow:none; }
[data-theme="light"] .hcp-dot {
background:var(--bg);
border-color:rgba(42,157,143,.55);
box-shadow:0 0 0 4px var(--bg);
}
[data-theme="light"] .hcp-num { color:rgba(26,26,30,.55); }
/* Active step — mint fill */
[data-theme="light"] .hcp-dot {
box-shadow:0 0 0 4px var(--bg), 0 0 calc(22px * var(--near)) rgba(42,157,143, calc(.45 * var(--near)));
}
[data-theme="light"] .hcp-step.is-active .hcp-dot {
background:#2a9d8f;
border-color:#2a9d8f;
}
[data-theme="light"] .hcp-step.is-active .hcp-num { color:#ffffff; }
/* Completed — opaque light bg, teal outline + number */
[data-theme="light"] .hcp-step.is-done .hcp-dot {
background:var(--bg);
border-color:#5def95;
box-shadow:0 0 0 4px var(--bg), inset 0 0 0 999px rgba(93,239,149,.10);
}
[data-theme="light"] .hcp-step.is-done .hcp-num { color:#2a9d8f; }
@media (max-width:900px) {
.how-cinema-progress { width:min(440px, 92vw); height:50px; margin-top:1rem; }
.hcp-dot { width:36px; height:36px; box-shadow:0 0 0 3px #0a0c10; }
.hcp-num { font-size:.7rem; }
}
@media (max-width:500px) {
.how-cinema-progress { width:min(340px, 94vw); height:44px; margin-top:.85rem; }
.hcp-dot { width:30px; height:30px; border-width:1.2px; }
.hcp-num { font-size:.62rem; letter-spacing:.02em; }
}
/* Large numeral — the "highlighted number on the line" */
.how-frame-num-big {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.8rem, 5vw, 4rem);
font-weight:900;
line-height:.9;
letter-spacing:-.045em;
background:linear-gradient(135deg,#5def95 0%,#3fb4c3 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 2px 14px rgba(93,239,149,.2));
align-self:end;
}
.how-frame-num-total {
font-family:'JetBrains Mono', monospace;
font-size:.78rem; font-weight:600;
letter-spacing:.08em;
color:rgba(248,248,224,.38);
align-self:end;
padding-bottom:.55rem;
}
.how-frame-num::before {
content:''; width:1px; height:1.6rem;
background:rgba(248,248,224,.18);
align-self:end;
margin-bottom:.55rem;
grid-column:3;
}
.how-frame-stage {
font-family:'JetBrains Mono', monospace;
font-size:.72rem; font-weight:700;
letter-spacing:.22em; text-transform:uppercase;
color:#5def95;
align-self:end;
padding-bottom:.65rem;
}
.how-frame-text { max-width:540px; }
.how-frame-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.25rem, 4.2vw, 3.75rem);
font-weight:900; line-height:1.06;
letter-spacing:-.032em;
margin:0 0 1.5rem;
color:#f8f8e0;
background:none;
-webkit-text-fill-color:#f8f8e0;
text-wrap:balance;
}
.how-frame-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(1.05rem, 1.25vw, 1.2rem);
line-height:1.7;
color:rgba(248,248,224,.82);
margin:0 0 1.85rem;
text-wrap:pretty;
}
.how-frame-feats {
list-style:none; padding:0; margin:0;
display:flex; flex-wrap:wrap; gap:.55rem;
}
.how-frame-feats li {
display:inline-flex; align-items:center;
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:clamp(.62rem, .72vw, .7rem); font-weight:600;
color:rgba(248,248,224,.72);
letter-spacing:.1em; text-transform:uppercase;
padding:.4rem .95rem; border-radius:999px;
border:1px solid rgba(248,248,224,.1);
background:rgba(255,255,255,.03);
white-space:nowrap;
position:relative;
transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.how-frame-feats li + li::before { content:none; }
.how-frame-feats li:hover {
color:#f8f8e0;
border-color:rgba(93,239,149,.3);
background:rgba(93,239,149,.06);
}
/* Frame visual column */
.how-frame-visual {
position:relative;
width:100%;
height:100%;
align-self:stretch;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(248,248,224,.08);
background:rgba(8,10,14,.6);
box-shadow:
0 12px 28px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.06);
}
.how-frame-visual::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit; padding:1px;
background:linear-gradient(160deg, rgba(93,239,149,.45) 0%, rgba(63,180,195,.3) 35%, rgba(38,132,233,.18) 70%, transparent 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none;
z-index:3;
}
.how-frame-visual img {
width:100%; height:100%;
object-fit:cover;
display:block;
filter:saturate(1.08) contrast(1.04) brightness(.9);
transition:transform 8s cubic-bezier(.22,1,.36,1);
transform:scale(1.04);
}
.how-frame.active .how-frame-visual img { transform:scale(1); }
/* Frame 4 — cloud platform UI screenshot: show entire interface (no aggressive crop) */
.how-frame-visual img[src*="04-platform"] {
object-fit:contain;
object-position:center;
filter:saturate(1.02) contrast(1.02);
transform:scale(1) !important;
background:#0a0e14;
}
[data-theme="light"] .how-frame-visual img[src*="04-platform"] { background:#f4f1ea; }
.how-frame-visual-tint {
position:absolute; inset:0;
background:linear-gradient(135deg, rgba(12,28,24,.3) 0%, transparent 50%, rgba(4,12,24,.4) 100%);
pointer-events:none;
z-index:2;
}
/* Progress dots */
.how-cinema-dots {
position:absolute;
bottom:clamp(1.5rem, 3.5vh, 3rem);
left:50%; transform:translateX(-50%);
display:flex; gap:.6rem; z-index:5;
}
.how-cinema-dot {
width:8px; height:8px; border-radius:50%;
border:none; background:rgba(248,248,224,.18);
cursor:pointer; padding:0;
transition:all .4s cubic-bezier(.22,1,.36,1);
}
.how-cinema-dot.active {
background:linear-gradient(135deg, #5def95, #3fb4c3);
box-shadow:0 0 10px rgba(93,239,149,.4);
transform:scale(1.35);
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
.how-frame { transition:opacity .2s ease; transform:none !important; }
.how-frame.active { transform:none !important; }
.how-frame-visual img { transition:none; transform:none !important; }
}
/* Mobile — stack frame content */
@media (max-width:900px) {
.how-cinema { height:350vh; }
.how-cinema-sticky {
padding-top:clamp(4.5rem, 8vh, 6rem);
padding-bottom:clamp(2rem, 4vh, 3rem);
gap:clamp(1rem, 2.5vh, 1.75rem);
}
.how-frame {
grid-template-columns:1fr;
grid-template-areas:"visual" "text";
gap:1rem;
padding:clamp(.85rem, 2.5vw, 1.25rem);
height:auto;
align-items:start;
}
.how-frames { height:auto; max-height:none; }
.how-frame-visual { aspect-ratio:16/10; max-height:28vh; height:auto; order:-1; }
.how-frame-text { align-self:auto; justify-content:flex-start; }
.how-frame-title { font-size:clamp(1.4rem, 5.5vw, 1.9rem); margin-bottom:.85rem; }
.how-frame-desc { font-size:.9rem; line-height:1.55; margin-bottom:1rem; }
.how-frame-feats { gap:.35rem; }
.how-frame-feats li { font-size:.68rem; padding:.32rem .75rem; white-space:normal; text-align:center; line-height:1.35; }
.how-frame-num { margin-bottom:1rem; gap:.5rem; }
.how-frame-num-big { font-size:2.2rem; }
.how-frame-num-total { font-size:.66rem; padding-bottom:.4rem; }
.how-frame-stage { font-size:.6rem; padding-bottom:.45rem; letter-spacing:.18em; }
.how-frame-num::before { height:1.2rem; margin-bottom:.4rem; }
.how-cinema-lbl { font-size:.58rem; margin-bottom:.4rem; }
.how-cinema-lbl::before { width:20px; margin-right:.5rem; }
.how-cinema-ttl { font-size:clamp(1.4rem, 5.5vw, 1.9rem); line-height:1.1; letter-spacing:-.03em; }
.how-cinema-dots { bottom:1.25rem; }
}
/* Hide old split-layout styles when cinema is in use */
.how-sec.how-sec--cinema .how-scroll-wrap,
.how-sec.how-sec--cinema .how-sticky,
.how-sec.how-sec--cinema .how-container,
.how-sec.how-sec--cinema .how-left,
.how-sec.how-sec--cinema .how-right { display:none !important; }
/* ═══════════════════════════════════════════════════════════
BEFORE / AFTER SLIDER — top half of how-stage
(Kept for reference — not used in cinema mode)
═══════════════════════════════════════════════════════════ */
.ba-slider {
position:absolute;
top:0; left:0; right:0;
height:62%;
overflow:hidden;
cursor:ew-resize;
user-select:none;
z-index:2;
--ba-pos:50%;
}
.ba-slider::after {
/* bottom gradient bleed */
content:''; position:absolute;
left:0; right:0; bottom:0; height:60px;
background:linear-gradient(180deg, transparent 0%, rgba(10,14,20,.9) 100%);
pointer-events:none; z-index:3;
}
.ba-layer {
position:absolute; inset:0;
overflow:hidden;
}
.ba-layer img {
width:100%; height:100%;
object-fit:cover;
display:block;
filter:saturate(1.08) contrast(1.04) brightness(.86);
}
.ba-layer--before { z-index:1; }
.ba-layer--after {
z-index:2;
clip-path:polygon(var(--ba-pos) 0, 100% 0, 100% 100%, var(--ba-pos) 100%);
transition:clip-path .6s cubic-bezier(.22,1,.36,1);
}
.ba-slider.is-dragging .ba-layer--after { transition:none; }
/* Divider line with gradient glow */
.ba-divider {
position:absolute;
top:0; bottom:0;
left:var(--ba-pos);
width:2px;
transform:translateX(-50%);
background:linear-gradient(180deg, rgba(93,239,149,0) 0%, rgba(93,239,149,.85) 22%, rgba(63,180,195,.9) 50%, rgba(38,132,233,.85) 78%, rgba(38,132,233,0) 100%);
box-shadow:0 0 18px rgba(63,180,195,.7), 0 0 4px rgba(93,239,149,.9);
z-index:3;
pointer-events:none;
transition:left .6s cubic-bezier(.22,1,.36,1);
}
.ba-slider.is-dragging .ba-divider { transition:none; }
/* Draggable handle centered on divider */
.ba-handle {
position:absolute;
top:50%; left:var(--ba-pos);
transform:translate(-50%, -50%);
width:56px; height:56px;
border-radius:50%;
background:rgba(8,10,14,.72);
backdrop-filter:blur(16px) saturate(150%);
-webkit-backdrop-filter:blur(16px) saturate(150%);
border:1.5px solid rgba(93,239,149,.45);
box-shadow:
0 6px 22px rgba(0,0,0,.55),
0 0 28px rgba(93,239,149,.35),
inset 0 1px 0 rgba(255,255,255,.18);
display:flex; align-items:center; justify-content:center;
cursor:ew-resize;
z-index:4;
transition:left .6s cubic-bezier(.22,1,.36,1), transform .25s ease, border-color .25s, box-shadow .25s;
}
.ba-slider.is-dragging .ba-handle { transition:transform .25s ease, border-color .25s, box-shadow .25s; }
.ba-handle:hover, .ba-slider.is-dragging .ba-handle {
transform:translate(-50%, -50%) scale(1.12);
border-color:rgba(93,239,149,.8);
box-shadow:
0 8px 30px rgba(0,0,0,.6),
0 0 40px rgba(93,239,149,.55),
inset 0 1px 0 rgba(255,255,255,.22);
}
.ba-handle svg {
width:22px; height:22px;
color:#9ef5b8;
stroke:currentColor;
}
/* Attention pulse on load */
@keyframes baPulse {
0%, 100% { box-shadow:0 0 0 0 rgba(93,239,149,.55), 0 6px 22px rgba(0,0,0,.55), 0 0 28px rgba(63,180,195,.35), inset 0 1px 0 rgba(255,255,255,.18); }
50% { box-shadow:0 0 0 16px rgba(93,239,149,0), 0 6px 22px rgba(0,0,0,.55), 0 0 28px rgba(63,180,195,.35), inset 0 1px 0 rgba(255,255,255,.18); }
}
.how-sec.is-revealed .ba-handle { animation:baPulse 2.4s ease-in-out 2.5 .8s; }
/* Before/after labels */
.ba-label {
position:absolute;
top:16px;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.62rem; font-weight:700;
letter-spacing:.18em; text-transform:uppercase;
padding:.45rem .85rem;
border-radius:999px;
background:rgba(0,0,0,.68);
backdrop-filter:blur(12px) saturate(140%);
-webkit-backdrop-filter:blur(12px) saturate(140%);
border:1px solid rgba(248,248,224,.12);
color:rgba(248,248,224,.82);
z-index:3;
pointer-events:none;
white-space:nowrap;
text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.ba-label--before { left:16px; }
.ba-label--after {
right:16px;
color:#9ef5b8;
border:1px solid rgba(93,239,149,.38);
background:linear-gradient(135deg, rgba(93,239,149,.22), rgba(38,132,233,.16));
}
/* Step info card background — sits behind step content */
.how-step-content-wrap {
position:absolute;
top:62%; left:0; right:0; bottom:0;
background:linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,.98) 40%, rgba(8,10,14,1) 100%);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
z-index:3;
border-top:1px solid rgba(248,248,224,.08);
pointer-events:none;
}
/* Ensure active step renders ABOVE the background card */
.how-stage .how-step.is-active { z-index:4 !important; }
/* Hide per-step media (slider is shared) */
.how-step-media { display:none; }
.how-step-tint { display:none; }
.how-step-corner { display:none; }
/* Reposition step content to fill the bottom card (high specificity to override originals) */
.how-stage .how-step { pointer-events:none; }
.how-stage .how-step.is-active { pointer-events:auto; }
.how-stage .how-step-content {
position:absolute;
left:clamp(1.5rem, 2.5vw, 2.5rem);
right:clamp(1.5rem, 2.5vw, 2.5rem);
top:64%;
bottom:clamp(1rem, 2vh, 1.5rem);
padding:0;
display:flex; flex-direction:column;
justify-content:center;
max-width:none;
z-index:6;
}
.how-stage .how-step-top { margin-bottom:.75rem; }
.how-stage .how-step-title { font-size:clamp(1.35rem, 2vw, 1.85rem); margin:0 0 .55rem; max-width:none; }
.how-stage .how-step-desc { font-size:clamp(.85rem, .98vw, .96rem); margin:0 0 .9rem; line-height:1.55; max-width:none; }
.how-stage .how-step-feats { gap:.35rem; }
.how-stage .how-step-feats li { font-size:clamp(.68rem, .78vw, .74rem); padding:.3rem .75rem; }
/* Mobile tweaks */
@media (max-width:960px) {
.ba-slider { height:55%; }
.how-step-content-wrap { top:55%; }
.how-step-content { top:55%; }
.ba-label { font-size:.55rem; padding:.35rem .7rem; top:12px; }
.ba-label--before { left:12px; }
.ba-label--after { right:12px; }
.ba-handle { width:46px; height:46px; }
.ba-handle svg { width:18px; height:18px; }
.how-step-title { font-size:clamp(1.3rem, 4vw, 1.7rem); }
}
/* Individual step card — stacked absolutely.
JS sets opacity directly based on scroll progress for butter-smooth cross-fade */
.how-step {
position:absolute; inset:0;
display:block;
opacity:0; /* JS overrides */
pointer-events:none;
z-index:1;
will-change:opacity, transform;
}
.how-step[data-step="0"] { opacity:1; } /* initial state before JS takes over */
.how-step.is-active {
pointer-events:auto;
z-index:3;
}
/* Mobile fallback: when JS clears inline styles, CSS class takes over */
@media(max-width:960px){
.how-step { opacity:0; transition:opacity .6s cubic-bezier(.22,1,.36,1); }
.how-step.is-active { opacity:1; }
.how-step[data-step="0"]:not(.is-active) { opacity:0; }
}
/* Image background */
.how-step-media {
position:absolute; inset:0;
overflow:hidden;
z-index:1;
}
.how-step-media img {
width:100%; height:100%;
object-fit:cover; object-position:center;
filter:saturate(1.08) contrast(1.05) brightness(.82);
transform:scale(1.08);
transition:transform 8s cubic-bezier(.22,1,.36,1);
}
.how-step.is-active .how-step-media img {
transform:scale(1);
}
.how-step-tint {
position:absolute; inset:0;
background:
radial-gradient(ellipse 70% 60% at 15% 80%, rgba(0,0,0,.6) 0%, transparent 60%),
linear-gradient(135deg, rgba(12,28,24,.55) 0%, transparent 50%, rgba(4,12,24,.65) 100%),
linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, rgba(0,0,0,.55) 100%);
}
/* Precision corner brackets */
.how-step-corner {
position:absolute;
width:28px; height:28px;
z-index:4;
opacity:0;
transition:opacity .6s cubic-bezier(.22,1,.36,1) .3s;
}
.how-step.is-active .how-step-corner {
opacity:1;
}
.how-step-corner::before, .how-step-corner::after {
content:''; position:absolute;
background:linear-gradient(135deg, #5def95, #3fb4c3);
box-shadow:0 0 10px rgba(93,239,149,.6);
border-radius:1px;
}
.how-step-corner--tl { top:22px; left:22px; }
.how-step-corner--tl::before { top:0; left:0; width:2px; height:16px; }
.how-step-corner--tl::after { top:0; left:0; width:16px; height:2px; }
.how-step-corner--tr { top:22px; right:22px; }
.how-step-corner--tr::before { top:0; right:0; width:2px; height:16px; }
.how-step-corner--tr::after { top:0; right:0; width:16px; height:2px; }
.how-step-corner--bl { bottom:22px; left:22px; }
.how-step-corner--bl::before { bottom:0; left:0; width:2px; height:16px; }
.how-step-corner--bl::after { bottom:0; left:0; width:16px; height:2px; }
.how-step-corner--br { bottom:22px; right:22px; }
.how-step-corner--br::before { bottom:0; right:0; width:2px; height:16px; }
.how-step-corner--br::after { bottom:0; right:0; width:16px; height:2px; }
/* Content overlay (bottom-left of the card) */
.how-step-content {
position:absolute;
left:clamp(1.8rem, 3vw, 3rem);
right:clamp(1.8rem, 3vw, 3rem);
bottom:clamp(1.8rem, 3vw, 3rem);
z-index:5;
color:#f8f8e0;
max-width:640px;
}
.how-step-top {
display:flex; align-items:flex-start; justify-content:space-between;
gap:1.5rem; margin-bottom:1.25rem;
}
.how-step-meta {
display:inline-flex; align-items:center; gap:.6rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.65rem; font-weight:700;
color:rgba(248,248,224,.92);
letter-spacing:.2em; text-transform:uppercase;
padding:.5rem .9rem;
background:rgba(8,12,18,.62);
border:1px solid rgba(93,239,149,.22);
border-top:1px solid rgba(93,239,149,.38);
border-radius:999px;
backdrop-filter:blur(16px) saturate(150%);
-webkit-backdrop-filter:blur(16px) saturate(150%);
text-shadow:0 1px 4px rgba(0,0,0,.75);
}
.how-step-meta-dot {
width:6px; height:6px; border-radius:50%;
background:#5def95;
box-shadow:0 0 8px #5def95, 0 0 0 3px rgba(93,239,149,.15);
animation:howLabelDot 2.2s ease-in-out infinite;
}
.how-step-counter {
display:inline-flex; align-items:center;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
line-height:1;
letter-spacing:-.02em;
padding:.35rem .85rem;
background:rgba(8,12,18,.55);
border:1px solid rgba(93,239,149,.18);
border-radius:999px;
backdrop-filter:blur(12px) saturate(140%);
-webkit-backdrop-filter:blur(12px) saturate(140%);
white-space:nowrap;
flex-shrink:0;
}
.how-step-counter-current {
font-size:1.35rem;
font-weight:900;
line-height:1;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 55%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.how-step-counter-slash {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.75rem;
font-weight:400;
opacity:.45;
margin:0 .12em 0 .18em;
color:#f8f8e0;
}
.how-step-counter-total {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.75rem;
font-weight:700;
opacity:.65;
color:#f8f8e0;
letter-spacing:.02em;
}
.how-step-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2rem, 2.9vw, 2.65rem);
font-weight:900;
line-height:1.06;
letter-spacing:-.03em;
background:linear-gradient(135deg, #fffef5 0%, #e8fbe8 30%, #5def95 65%, #3fb4c3 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 2px 18px rgba(93,239,149,.18));
margin:0 0 .9rem;
max-width:540px;
text-wrap:balance;
}
.how-step-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(.96rem, 1.12vw, 1.06rem);
line-height:1.65;
color:rgba(248,248,224,.88);
margin:0 0 1.4rem;
max-width:540px;
font-weight:400;
text-shadow:0 2px 18px rgba(0,0,0,.88);
}
.how-step-feats {
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap;
gap:.4rem;
}
.how-step-feats li {
display:inline-flex; align-items:center;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:clamp(.76rem, .88vw, .82rem); font-weight:500;
color:rgba(248,248,224,.84);
letter-spacing:.01em;
padding:.38rem 1rem;
border-radius:999px;
border:1px solid rgba(248,248,224,.14);
background:rgba(255,255,255,.05);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
white-space:nowrap;
text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.how-step-feats li::before {
display:none;
}
/* Content cascade — entering step animates its children */
.how-step-meta, .how-step-counter, .how-step-title, .how-step-desc, .how-step-feats li {
opacity:0;
transform:translateY(16px);
transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.how-step.is-active .how-step-meta { opacity:1; transform:translateY(0); transition-delay:.25s; }
.how-step.is-active .how-step-counter { opacity:1; transform:translateY(0); transition-delay:.35s; }
.how-step.is-active .how-step-title { opacity:1; transform:translateY(0); transition-delay:.45s; }
.how-step.is-active .how-step-desc { opacity:1; transform:translateY(0); transition-delay:.6s; }
.how-step.is-active .how-step-feats li:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.75s; }
.how-step.is-active .how-step-feats li:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.85s; }
.how-step.is-active .how-step-feats li:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.95s; }
/* Responsive — mobile stacks vertically, no sticky */
@media(max-width:960px){
.how-container {
grid-template-columns:1fr;
gap:2.5rem;
padding:4rem 1.5rem 5rem;
}
.how-left { position:static; }
.how-left-inner { max-width:none; }
.how-title { font-size:clamp(2rem, 8vw, 2.8rem); }
.how-stats-inline { gap:1.25rem; }
.how-tab { padding:1.1rem 0; gap:1rem; }
.how-tab-name { font-size:clamp(1.1rem, 4.5vw, 1.4rem); }
.how-tab.is-active .how-tab-name { font-size:clamp(1.3rem, 5.5vw, 1.7rem); }
.how-stage { height:min(70vh, 520px); }
.how-step-content {
left:1.25rem; right:1.25rem; bottom:1.25rem;
}
.how-step-title { font-size:clamp(1.5rem, 6vw, 1.95rem); }
.how-step-desc { font-size:.92rem; line-height:1.55; }
.how-step-counter-current { font-size:1.2rem; }
.how-step-feats li { font-size:.72rem; padding:.32rem .75rem; }
.how-step-corner { width:22px; height:22px; }
}
@media(prefers-reduced-motion:reduce){
.how-step, .how-step-media img, .how-step-meta, .how-step-counter, .how-step-title, .how-step-desc, .how-step-feats li { transition:none !important; }
.how-label-dot, .how-step-meta-dot, .how-scroll-hint-chevron { animation:none !important; }
/* Entrance stagger: show immediately */
.how-label, .how-title, .how-desc, .how-stats-inline, .how-tabs-wrap, .how-scroll-hint, .how-stage {
opacity:1 !important; transform:none !important; transition:none !important;
}
}
/* ════════════════════════════════════════════════════════════════
LIVE DEMO — premium centered monitor with tabbed 2D/3D viewer
════════════════════════════════════════════════════════════════ */
.live-sec {
position:relative;
padding:clamp(5rem, 10vh, 9rem) 5vw clamp(5rem, 10vh, 9rem);
background:var(--bg);
overflow:hidden;
}
.live-sec::before {
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,
transparent 0%,
rgba(93,239,149,.2) 20%,
rgba(93,239,149,.4) 50%,
rgba(38,132,233,.2) 80%,
transparent 100%);
z-index:10; pointer-events:none;
}
/* Ambient brand glow behind the screen */
.live-sec::after {
content:''; position:absolute;
top:50%; left:50%; transform:translate(-50%,-50%);
width:min(1400px, 90%); height:min(900px, 80%);
background:
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(93,239,149,.15) 0%, transparent 65%),
radial-gradient(ellipse 40% 30% at 20% 30%, rgba(93,239,149,.08) 0%, transparent 60%),
radial-gradient(ellipse 40% 30% at 80% 70%, rgba(38,132,233,.08) 0%, transparent 60%);
filter:blur(50px);
pointer-events:none;
z-index:0;
}
.live-container {
max-width:1400px;
margin:0 auto;
position:relative;
z-index:1;
}
/* Header */
.live-header {
text-align:center;
max-width:720px;
margin:0 auto clamp(2.5rem, 5vh, 4rem);
}
.live-label {
display:inline-flex; align-items:center; gap:.55rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.72rem; font-weight:700;
color:var(--teal);
letter-spacing:.24em; text-transform:uppercase;
margin-bottom:1.4rem;
padding:.5rem 1.1rem;
background:rgba(93,239,149,.06);
border:1px solid rgba(93,239,149,.22);
border-radius:999px;
backdrop-filter:blur(10px);
}
.live-label-dot {
width:7px; height:7px; border-radius:50%;
background:#ef4444;
box-shadow:0 0 10px rgba(239,68,68,.9), 0 0 0 3px rgba(239,68,68,.15);
animation:liveDot 1.4s ease-in-out infinite;
flex-shrink:0;
}
@keyframes liveDot { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.3); opacity:.5} }
.live-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.2rem, 5vw, 4.2rem);
font-weight:900;
line-height:1.02;
letter-spacing:-.03em;
color:var(--text);
margin:0 0 1rem;
}
.live-title em {
font-family:inherit;
font-style:normal;
font-weight:900;
color:#2a9d8f;
background:none;
-webkit-text-fill-color:#2a9d8f;
}
.live-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(1.02rem, 1.2vw, 1.12rem);
line-height:1.65;
color:var(--muted);
margin:0 auto .75rem;
max-width:580px;
font-weight:500;
}
/* Light mode: match the .how-cinema-ttl/.usp-cinema-ttl accent colour */
[data-theme="light"] .live-title em {
color:#2a9d8f;
background:none;
-webkit-text-fill-color:#2a9d8f;
}
/* Benefit hooks row — cloud/measurement advantages */
.live-hooks {
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap;
gap:.5rem;
margin:.75rem auto 0;
max-width:720px;
}
.live-hook {
display:inline-flex; align-items:center;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:clamp(.62rem, .72vw, .68rem);
font-weight:600;
color:var(--muted);
letter-spacing:.08em;
text-transform:uppercase;
padding:.35rem .85rem;
border-radius:999px;
border:1px solid var(--bg3);
background:var(--bg-card);
white-space:nowrap;
}
.live-hook-sep {
width:3px; height:3px;
border-radius:50%;
background:rgba(93,239,149,.4);
flex-shrink:0;
}
@media(max-width:768px){
.live-hooks { gap:.35rem; }
.live-hook { font-size:.58rem; padding:.28rem .65rem; }
}
/* ── THE SCREEN — premium monitor */
.live-screen {
position:relative;
max-width:1200px;
margin:0 auto;
border-radius:24px;
background:linear-gradient(180deg, rgba(14,18,24,.95) 0%, rgba(10,14,20,.98) 100%);
border:1px solid rgba(93,239,149,.3);
border-top:1px solid rgba(93,239,149,.5);
box-shadow:
0 60px 140px rgba(0,0,0,.7),
0 0 0 1px rgba(93,239,149,.14),
0 0 140px rgba(93,239,149,.18),
inset 0 1px 0 rgba(255,255,255,.14);
overflow:hidden;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
isolation:isolate;
}
/* Soft outer glow halo */
.live-screen-glow {
position:absolute;
inset:-40px;
border-radius:40px;
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(93,239,149,.2) 0%, transparent 70%);
filter:blur(30px);
z-index:-1;
pointer-events:none;
}
/* CHROME — top bar */
.live-chrome {
display:flex; align-items:center; justify-content:center;
gap:1.25rem;
padding:1.4rem 1.4rem 1rem;
background:linear-gradient(180deg, rgba(20,26,34,.9) 0%, rgba(14,18,24,.85) 100%);
border-bottom:1px solid rgba(93,239,149,.18);
position:relative; z-index:2;
}
.live-traffic {
display:flex; align-items:center; gap:.5rem;
flex-shrink:0;
}
.live-tl {
width:12px; height:12px; border-radius:50%;
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.2);
}
.live-tl--red { background:linear-gradient(180deg, #ff6b5f 0%, #e04b3e 100%); }
.live-tl--yellow { background:linear-gradient(180deg, #ffce43 0%, #e9a91f 100%); }
.live-tl--green { background:linear-gradient(180deg, #4fdc70 0%, #2cb14a 100%); }
/* ═══════════════════════════════════════════════════════════
LIVE DEMO TABS — iOS Segmented Control
Sliding gradient "knob" moves between tabs with elastic spring
═══════════════════════════════════════════════════════════ */
.live-tabs {
display:inline-flex;
position:relative;
padding:4px;
background:rgba(255,255,255,.04);
border:1px solid var(--b);
border-radius:999px;
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
inset 0 0 24px rgba(0,0,0,.3),
0 4px 16px rgba(0,0,0,.35);
}
/* Sliding indicator — gradient knob uses the same var(--grad) as nav .lang-b.act */
.live-tabs::before {
content:'';
position:absolute;
top:4px; bottom:4px;
left:4px;
width:calc(25% - 2px);
border-radius:999px;
background:var(--grad);
box-shadow:
0 2px 10px rgba(93,239,149,.45),
0 0 22px rgba(93,239,149,.3),
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.08);
transition:transform .55s cubic-bezier(.34, 1.56, .64, 1); /* elastic spring */
z-index:1;
pointer-events:none;
}
/* Knob slides between tab positions (4 tabs) */
.live-tabs:has(.live-tab[data-view="pointcloud"].is-active)::before { transform:translateX(100%); }
.live-tabs:has(.live-tab[data-view="mesh"].is-active)::before { transform:translateX(200%); }
.live-tabs:has(.live-tab[data-view="splat"].is-active)::before { transform:translateX(300%); }
/* Fallback for browsers without :has() — use data attribute set by JS */
.live-tabs[data-active="pointcloud"]::before { transform:translateX(100%); }
.live-tabs[data-active="mesh"]::before { transform:translateX(200%); }
.live-tabs[data-active="splat"]::before { transform:translateX(300%); }
.live-tab {
position:relative;
z-index:2;
display:inline-flex; align-items:center; justify-content:center;
gap:.55rem;
padding:.58rem 1.2rem;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.82rem; font-weight:600;
color:var(--muted);
letter-spacing:.01em;
background:transparent;
border:none; cursor:pointer;
border-radius:999px;
flex:1;
min-width:0;
white-space:nowrap;
transition:color .4s cubic-bezier(.22,1,.36,1);
}
.live-tab svg {
color:currentColor;
opacity:.7;
transition:opacity .35s, transform .4s cubic-bezier(.22,1,.36,1);
flex-shrink:0;
}
.live-tab:hover { color:var(--text); }
.live-tab:hover svg { opacity:1; }
.live-tab.is-active {
color:var(--bg);
}
.live-tab.is-active svg {
opacity:1;
transform:scale(1.05);
}
.live-tab:focus-visible { outline:2px solid rgba(93,239,149,.6); outline-offset:3px; }
/* Reduced motion — disable spring */
@media (prefers-reduced-motion:reduce) {
.live-tabs::before { transition:transform .15s linear; }
.live-tab.is-active svg { transform:none; }
}
.live-status {
display:inline-flex; align-items:center; gap:.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.68rem; font-weight:700;
color:rgba(248,248,224,.75);
letter-spacing:.2em; text-transform:uppercase;
padding:.4rem .85rem;
background:rgba(93,239,149,.08);
border:1px solid rgba(93,239,149,.25);
border-radius:999px;
flex-shrink:0;
}
.live-status-dot {
width:6px; height:6px; border-radius:50%;
background:#5def95;
box-shadow:0 0 8px #5def95;
animation:liveStatusDot 1.6s ease-in-out infinite;
}
@keyframes liveStatusDot { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(1.25)} }
/* STAGE — main viewer area */
.live-stage {
position:relative;
width:100%;
aspect-ratio: 16 / 9;
max-height:680px;
min-height:440px;
background:var(--bg1);
overflow:hidden;
}
/* Subtle grid pattern backdrop (technical drawing feel) */
.live-grid {
position:absolute; inset:0;
background-image:
linear-gradient(rgba(93,239,149,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(93,239,149,.06) 1px, transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,.8) 0%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,.8) 0%, transparent 80%);
z-index:1;
pointer-events:none;
}
/* Corner brackets */
.live-corner {
position:absolute; width:26px; height:26px; z-index:3;
pointer-events:none;
}
.live-corner::before, .live-corner::after {
content:''; position:absolute;
background:linear-gradient(135deg, #5def95, #3fb4c3);
box-shadow:0 0 10px rgba(93,239,149,.6);
border-radius:1px;
}
.live-corner--tl { top:22px; left:22px; }
.live-corner--tl::before { top:0; left:0; width:2px; height:16px; }
.live-corner--tl::after { top:0; left:0; width:16px; height:2px; }
.live-corner--tr { top:22px; right:22px; }
.live-corner--tr::before { top:0; right:0; width:2px; height:16px; }
.live-corner--tr::after { top:0; right:0; width:16px; height:2px; }
.live-corner--bl { bottom:22px; left:22px; }
.live-corner--bl::before { bottom:0; left:0; width:2px; height:16px; }
.live-corner--bl::after { bottom:0; left:0; width:16px; height:2px; }
.live-corner--br { bottom:22px; right:22px; }
.live-corner--br::before { bottom:0; right:0; width:2px; height:16px; }
.live-corner--br::after { bottom:0; right:0; width:16px; height:2px; }
/* Views — stacked, cross-fade */
.live-view {
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none;
transition:opacity .6s cubic-bezier(.22,1,.36,1);
z-index:2;
}
.live-view.is-active {
opacity:1; pointer-events:auto;
}
.live-view iframe.embed-frame {
position:absolute; inset:0;
width:100%; height:100%;
border:none; display:block;
}
.live-view > div { width:100%; height:100%; position:relative; }
/* Workspace-mode iframes (all 4 tabs) — each tab uses PIX4D's /site/.../{map|model}
share URL so the native bottom toolbar (2D/3D toggle, zoom, settings, fullscreen,
snapshot) is visible. We extend each iframe past the container in all 4 directions
so PIX4D's chrome (top header, left "Layers" panel, right "Properties" panel +
drawing tools) gets clipped by .live-stage{overflow:hidden}, leaving only the
center viewer + annotations + the bottom action toolbar. */
.live-view[data-view="ortho"] iframe.embed-frame,
.live-view[data-view="pointcloud"] iframe.embed-frame,
.live-view[data-view="mesh"] iframe.embed-frame,
.live-view[data-view="splat"] iframe.embed-frame {
top:-180px;
left:-360px;
width:calc(100% + 800px);
height:calc(100% + 280px);
}
@media(max-width:960px){
.live-view[data-view="ortho"] iframe.embed-frame,
.live-view[data-view="pointcloud"] iframe.embed-frame,
.live-view[data-view="mesh"] iframe.embed-frame,
.live-view[data-view="splat"] iframe.embed-frame {
top:-170px;
left:-460px;
width:calc(100% + 980px);
height:calc(100% + 270px);
}
}
@media(max-width:560px){
.live-view[data-view="ortho"] iframe.embed-frame,
.live-view[data-view="pointcloud"] iframe.embed-frame,
.live-view[data-view="mesh"] iframe.embed-frame,
.live-view[data-view="splat"] iframe.embed-frame {
top:-185px;
left:-380px;
width:calc(100% + 800px);
height:calc(100% + 285px);
}
}
/* Blocked (cookie consent) state */
.live-blocked {
position:absolute; inset:0;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:1.2rem;
padding:2rem;
text-align:center;
}
.live-blocked-icon {
width:84px; height:84px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg, rgba(93,239,149,.1) 0%, rgba(63,180,195,.06) 100%);
border:1px solid rgba(93,239,149,.25);
color:#5def95;
box-shadow:
0 0 0 4px rgba(10,14,20,.5),
0 0 40px rgba(93,239,149,.15),
inset 0 1px 0 rgba(255,255,255,.1);
}
.live-blocked-icon--spin svg { animation:liveSpin 1.4s linear infinite; }
@keyframes liveSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .live-blocked-icon--spin svg { animation:none; } }
.live-blocked-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:1.5rem; font-weight:800;
color:#f8f8e0;
margin:0;
letter-spacing:-.015em;
}
.live-blocked-desc {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.95rem; line-height:1.6;
color:rgba(248,248,224,.7);
margin:0;
max-width:440px;
}
.live-accept-btn {
display:inline-flex; align-items:center; gap:.55rem;
padding:.85rem 1.75rem;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.92rem; font-weight:700;
color:#0a1a14;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 55%, #2684e9 100%);
border:none; border-radius:999px;
cursor:pointer;
letter-spacing:.01em;
box-shadow:
0 0 0 1px rgba(93,239,149,.5),
0 10px 28px rgba(93,239,149,.35),
0 0 40px rgba(93,239,149,.2),
inset 0 1px 0 rgba(255,255,255,.45);
transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.live-accept-btn:hover {
transform:translateY(-3px);
box-shadow:
0 0 0 1px rgba(93,239,149,.7),
0 16px 40px rgba(93,239,149,.5),
0 0 60px rgba(93,239,149,.3),
inset 0 1px 0 rgba(255,255,255,.55);
}
.live-accept-btn svg { color:#0a1a14; }
.live-accept-btn:focus-visible { outline:2px solid #5def95; outline-offset:3px; }
/* FOOTER — status bar */
.live-footer {
display:flex; align-items:center; justify-content:space-between;
gap:1.5rem;
padding:1rem 1.4rem;
background:linear-gradient(0deg, rgba(20,26,34,.9) 0%, rgba(14,18,24,.85) 100%);
border-top:1px solid rgba(93,239,149,.18);
position:relative; z-index:2;
}
.live-footer-metrics {
display:flex; align-items:center; gap:clamp(.6rem, 1.4vw, 1.4rem);
}
.live-metric {
display:flex; flex-direction:column; gap:.1rem;
}
.live-metric-val {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:1.05rem; font-weight:800;
line-height:1;
letter-spacing:-.02em;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 60%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.live-metric-val small {
font-size:.7em; font-weight:700;
margin-left:.1em; opacity:.75;
}
.live-metric-lbl {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.6rem; font-weight:600;
color:rgba(248,248,224,.52);
letter-spacing:.14em; text-transform:uppercase;
}
.live-metric-sep {
width:1px; height:28px;
background:rgba(93,239,149,.2);
}
.live-fullscreen-btn {
position:relative;
display:inline-flex; align-items:center; gap:.5rem;
padding:.7rem 1.25rem;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.82rem; font-weight:600;
color:#f8f8e0;
background:rgba(255,255,255,.04);
border:1px solid rgba(93,239,149,.24);
border-radius:999px;
text-decoration:none;
letter-spacing:.01em;
transition:all .3s cubic-bezier(.22,1,.36,1);
flex-shrink:0;
isolation:isolate;
overflow:hidden;
}
.live-fullscreen-btn:hover {
background:rgba(93,239,149,.12);
border-color:rgba(93,239,149,.4);
color:#f8f8e0;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.3), 0 0 24px rgba(93,239,149,.2);
}
.live-fullscreen-btn svg {
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.live-fullscreen-btn:hover svg {
transform:translate(2px, -2px);
}
/* PRIMARY CTA variant — gradient pill, attention-magnet for the live demo footer */
.live-fullscreen-btn--cta {
padding:.85rem 1.5rem;
font-size:.92rem;
font-weight:700;
letter-spacing:.005em;
color:#0a1a14;
background:linear-gradient(135deg, #5def95 0%, #3FB4C3 55%, #2684E9 100%);
border:1px solid rgba(255,255,255,.18);
box-shadow:
0 0 0 1px rgba(93,239,149,.45),
0 10px 28px rgba(93,239,149,.32),
0 0 36px rgba(93,239,149,.22),
inset 0 1px 0 rgba(255,255,255,.45);
}
.live-fullscreen-btn--cta:hover {
color:#0a1a14;
background:linear-gradient(135deg, #5def95 0%, #3FB4C3 55%, #2684E9 100%);
border-color:rgba(255,255,255,.28);
transform:translateY(-3px);
box-shadow:
0 0 0 1px rgba(93,239,149,.7),
0 14px 36px rgba(93,239,149,.5),
0 0 56px rgba(93,239,149,.35),
inset 0 1px 0 rgba(255,255,255,.55);
}
/* Animated sheen sweeping across the button — draws the eye */
.live-fullscreen-spark {
position:absolute;
top:0; bottom:0;
left:-40%;
width:40%;
z-index:-1;
background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
filter:blur(2px);
animation:liveSheen 3.4s cubic-bezier(.4,0,.2,1) infinite;
pointer-events:none;
}
@keyframes liveSheen {
0% { left:-40%; opacity:0; }
10% { opacity:.85; }
60% { left:120%; opacity:.85; }
61% { opacity:0; }
100% { left:120%; opacity:0; }
}
@media(prefers-reduced-motion:reduce){
.live-fullscreen-spark { animation:none; opacity:0; }
}
.live-footer-cta {
display:flex; align-items:center; gap:1.1rem;
flex-shrink:0;
}
.live-footer-pitch {
margin:0;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.95rem; line-height:1.35; font-weight:500;
color:rgba(248,248,224,.92);
text-align:right;
letter-spacing:.005em;
max-width:32ch;
}
.live-footer-pitch em {
display:block;
margin-top:.2rem;
font-style:normal; font-weight:800;
font-size:1em;
background:linear-gradient(135deg, #5def95 0%, #3FB4C3 60%, #2684E9 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:.005em;
}
/* Responsive */
@media(max-width:960px){
.live-sec { padding:4rem 1.25rem; }
.live-header { margin-bottom:2rem; }
.live-chrome { padding:.75rem 1rem; gap:.75rem; flex-wrap:wrap; }
.live-traffic { order:1; }
.live-status { order:3; font-size:.58rem; padding:.3rem .65rem; }
.live-tabs { order:4; width:100%; justify-content:center; }
.live-tab { padding:.5rem .65rem; font-size:.74rem; gap:.4rem; }
.live-tab svg { width:13px; height:13px; }
.live-stage { aspect-ratio:auto; height:min(60vh, 440px); min-height:360px; }
.live-blocked-title { font-size:1.2rem; }
.live-blocked-desc { font-size:.88rem; }
.live-footer { flex-direction:column; gap:1rem; padding:1rem; }
.live-footer-metrics { gap:.8rem; }
.live-metric-val { font-size:.92rem; }
.live-metric-lbl { font-size:.55rem; }
.live-metric-sep { height:22px; }
.live-fullscreen-btn { width:100%; justify-content:center; }
.live-footer-cta { flex-direction:column; gap:.65rem; width:100%; }
.live-footer-pitch { text-align:center; max-width:none; font-size:.8rem; }
}
@media(max-width:560px){
.live-tab { padding:.45rem .4rem; font-size:.66rem; gap:.3rem; letter-spacing:0; }
.live-tab svg { width:12px; height:12px; }
}
@media(prefers-reduced-motion:reduce){
.live-label-dot, .live-status-dot { animation:none !important; }
.live-view, .live-tab, .live-accept-btn, .live-fullscreen-btn { transition:none !important; }
}
/* ─────────────────────────────────────────────────────────────
LIVE DEMO — bottom fade-mask removed (was creating visible
glow above the footer bar).
───────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
SECTORS — horizontal scroll carousel with background images
════════════════════════════════════════════════════════════════ */
.sector-scroll {
display:block;
overflow:hidden;
padding:1.5rem 2.5rem 2rem;
margin:-.75rem -2.5rem -1rem;
max-width:100vw;
/* Soft fade at both edges so tiles enter/leave gracefully */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.sector-track {
display:flex;
gap:clamp(.75rem, 1.5vw, 1.25rem);
width:max-content;
animation:sectorMarquee 48s linear infinite;
will-change:transform;
}
.sector-scroll:hover .sector-track { animation-play-state:paused; }
@keyframes sectorMarquee {
from { transform:translate3d(0,0,0); }
to { transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion:reduce) {
.sector-track { animation:none; }
}
.sec-tile {
flex:0 0 clamp(260px, 24vw, 340px);
height:clamp(130px, 13vw, 160px);
position:relative;
border-radius:18px;
overflow:hidden;
scroll-snap-align:start;
cursor:pointer;
border:1px solid rgba(248,248,224,.08);
transform:translateY(0) scale(1);
box-shadow:
0 6px 16px rgba(0,0,0,.22),
0 1px 2px rgba(0,0,0,.18);
transition:
transform .55s cubic-bezier(.22,1,.36,1),
border-color .4s cubic-bezier(.22,1,.36,1),
box-shadow .55s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.sec-tile:hover {
border-color:rgba(93,239,149,.3);
transform:scale(1.025);
box-shadow:
0 26px 60px rgba(0,0,0,.45),
0 12px 24px rgba(0,0,0,.32),
0 0 48px rgba(93,239,149,.14),
0 0 0 1px rgba(93,239,149,.1);
}
/* Background image */
.sec-tile-img {
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
transform:scale(1.08);
transition:transform 6s cubic-bezier(.22,1,.36,1);
filter:brightness(.7) saturate(1.1);
}
.sec-tile:hover .sec-tile-img {
transform:scale(1);
}
/* Dark gradient overlay */
.sec-tile::before {
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,
transparent 0%,
rgba(8,10,14,.2) 30%,
rgba(8,10,14,.75) 65%,
rgba(8,10,14,.95) 100%);
z-index:2;
transition:background .4s;
}
.sec-tile:hover::before {
background:linear-gradient(180deg,
transparent 0%,
rgba(8,10,14,.15) 25%,
rgba(8,10,14,.7) 55%,
rgba(8,10,14,.92) 100%);
}
/* Gradient top-edge accent */
.sec-tile::after {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
z-index:5;
opacity:0;
transition:opacity .4s;
}
.sec-tile:hover::after { opacity:1; }
/* Content overlay — horizontal strip layout: icon on left, title on right, p hidden until hover */
.sec-tile-content {
position:absolute;
left:0; right:0; bottom:0;
padding:.85rem 1rem .9rem;
z-index:3;
display:grid;
grid-template-columns:30px 1fr;
grid-template-areas:
"icon title"
"desc desc";
column-gap:.7rem;
row-gap:.25rem;
align-items:center;
}
.sec-tile .st-icon {
grid-area:icon;
width:30px; height:30px;
border-radius:8px;
background:rgba(8,12,18,.55);
border:1px solid rgba(93,239,149,.22);
display:flex; align-items:center; justify-content:center;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s;
flex-shrink:0;
}
.sec-tile .st-icon svg { width:15px; height:15px; color:#5def95; }
.sec-tile:hover .st-icon {
transform:scale(1.08);
border-color:rgba(93,239,149,.45);
}
.sec-tile h3, .sec-tile h4 {
grid-area:title;
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(.92rem, 1.05vw, 1.02rem);
font-weight:800;
color:#f8f8e0;
margin:0;
letter-spacing:-.01em;
line-height:1.2;
text-shadow:0 2px 12px rgba(0,0,0,.8);
/* Clamp to 2 lines so every card's header footprint is identical */
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.sec-tile p {
grid-area:desc;
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(.9rem, 1vw, 1rem);
font-weight:500;
color:rgba(248,248,224,.95);
line-height:1.5;
margin:0;
max-height:0;
overflow:hidden;
opacity:0;
transition:max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s, margin-top .4s;
text-shadow:0 1px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.6);
}
.sec-tile:hover p {
max-height:140px;
opacity:1;
margin-top:.25rem;
}
/* ════════════════════════════════════════════════════════════════
USP TABLE
════════════════════════════════════════════════════════════════ */
/* — USP Cinema: scroll-pinned feature showcase — */
/* USP section — converted from scroll-pinned cinema to compact bento grid
(reduces the 3-cinemas-in-a-row repetitiveness while keeping all content) */
.usp-cinema {
position:relative;
height:auto;
padding:clamp(4.75rem, 8vw, 7rem) clamp(1.5rem, 3vw, 3rem);
background:var(--bg);
}
.usp-sticky {
position:relative;
display:flex; flex-direction:column; align-items:center;
padding:0; max-width:1200px; margin:0 auto;
}
/* Ambient glow */
.usp-glow {
position:absolute; width:45vw; height:45vh; border-radius:50%;
filter:blur(110px); pointer-events:none; z-index:0;
opacity:0; transition:opacity 1.2s ease, background 1.2s ease;
top:15%; left:20%;
}
.usp-glow.g0 { opacity:1; background:rgba(93,239,149,.05); }
.usp-glow.g1 { opacity:1; background:rgba(93,239,149,.06); left:40%; }
.usp-glow.g2 { opacity:1; background:rgba(38,132,233,.05); left:15%; }
.usp-glow.g3 { opacity:1; background:rgba(120,93,239,.05); left:45%; }
/* Section heading group — now inline at the top of the section */
.usp-cinema-head {
position:relative; top:auto; left:auto; transform:none;
text-align:center; z-index:3; width:auto;
margin-bottom:clamp(2rem, 4vw, 3rem);
}
.usp-cinema-lbl {
font-family:'JetBrains Mono', monospace;
font-size:.82rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
color:#5def95; white-space:nowrap;
margin-bottom:1rem;
}
.usp-cinema-lbl::before {
content:''; display:inline-block; width:28px; height:2px;
background:linear-gradient(90deg,#5def95,#3fb4c3);
vertical-align:middle; margin-right:.75rem;
}
.usp-cinema-ttl {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(2.25rem, 4.2vw, 3.75rem);
font-weight:900; line-height:1.06;
letter-spacing:-.032em;
color:rgba(248,248,224,.92);
margin:0;
}
.usp-cinema-ttl .accent {
color:#2a9d8f;
background:none;
-webkit-text-fill-color:#2a9d8f;
}
/* Slides — now shown as 2x2 bento grid (all 4 visible at once) */
.usp-slides {
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(1rem, 1.5vw, 1.4rem);
width:100%; max-width:1100px;
z-index:2;
margin:0 auto;
}
.usp-slide {
grid-area:auto;
display:flex; flex-direction:column; align-items:flex-start; text-align:left;
padding:clamp(1.75rem, 2.5vw, 2.25rem);
opacity:1;
transform:none;
pointer-events:auto;
position:relative;
background:var(--bg2);
border:1px solid var(--bg3);
border-radius:24px;
transition:transform .4s cubic-bezier(.22,1,.36,1),
border-color .4s cubic-bezier(.22,1,.36,1),
box-shadow .4s cubic-bezier(.22,1,.36,1);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
min-height:280px;
}
.usp-slide::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit; padding:1px;
background:linear-gradient(160deg, rgba(93,239,149,.4) 0%, rgba(63,180,195,.3) 40%, rgba(38,132,233,.18) 80%, transparent 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0;
transition:opacity .4s ease;
pointer-events:none;
z-index:3;
}
.usp-slide:hover {
transform:translateY(-3px);
border-color:rgba(248,248,224,.14);
box-shadow:0 16px 40px rgba(0,0,0,.3), 0 0 60px rgba(93,239,149,.1);
}
.usp-slide:hover::before { opacity:1; }
/* Mobile — single column stack */
@media (max-width:800px) {
.usp-slides { grid-template-columns:1fr; }
.usp-slide { min-height:auto; }
}
/* Number */
.usp-num {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(4.5rem, 11vw, 9rem);
font-weight:900; line-height:1; letter-spacing:-.05em;
background:linear-gradient(135deg, rgba(93,239,149,.32) 0%, rgba(63,180,195,.22) 50%, rgba(38,132,233,.14) 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
margin-bottom:.4rem; user-select:none;
}
/* Title */
.usp-cinema-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1.85rem, 4.2vw, 3.4rem);
font-weight:900; line-height:1.08; letter-spacing:-.03em;
color:rgba(248,248,224,.95);
max-width:660px; margin-bottom:1rem; text-wrap:balance;
}
/* Description */
.usp-cinema-desc {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(.95rem, 1.1vw, 1.08rem);
line-height:1.72; color:rgba(248,248,224,.55);
max-width:530px; margin-bottom:1.5rem;
}
/* Gradient divider line */
.usp-cinema-line {
width:clamp(60px, 10vw, 120px); height:2px;
background:linear-gradient(90deg, #5def95, #3fb4c3, #2684e9);
border-radius:2px; margin-bottom:1.25rem; opacity:.5;
}
/* Stat pills */
.usp-cinema-pills { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:.45rem; width:100%; }
.usp-cinema-pill {
display:inline-flex; align-items:center;
font-family:'JetBrains Mono', monospace;
font-size:clamp(.6rem, .7vw, .66rem); font-weight:600;
color:rgba(248,248,224,.6);
letter-spacing:.1em; text-transform:uppercase;
padding:.35rem .85rem; border-radius:999px;
border:1px solid rgba(248,248,224,.08);
background:rgba(255,255,255,.025);
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce) {
.usp-slide { transition:opacity .15s ease; transform:none !important; }
.usp-slide:hover { transform:none !important; }
.usp-glow { transition:none; }
}
/* ════════════════════════════════════════════════════════════════
TESTIMONIALS
════════════════════════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
/* ═══════════════════════════════════════════════════════════
TESTIMONIALS MARQUEE — Option 1
Infinite horizontal scroll, 2 rows opposite direction
═══════════════════════════════════════════════════════════ */
.testi-marquee {
position:relative;
margin-top:clamp(2rem, 4vw, 3rem);
overflow:hidden;
mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
padding:.5rem 0;
}
.testi-marquee-row {
display:flex;
overflow:hidden;
padding:.6rem 0;
}
.testi-marquee-track {
display:flex;
gap:1.25rem;
width:max-content;
animation:testiScroll 55s linear infinite;
}
.testi-marquee-row--right .testi-marquee-track {
animation:testiScrollR 52s linear infinite;
}
.testi-marquee:hover .testi-marquee-track { animation-play-state:paused; }
@keyframes testiScroll {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
@keyframes testiScrollR {
0% { transform:translateX(-50%); }
100% { transform:translateX(0); }
}
/* Marquee card */
.testi-card {
flex:0 0 clamp(320px, 32vw, 420px);
background:rgba(255,255,255,.035);
border:1px solid rgba(248,248,224,.1);
border-radius:20px;
padding:1.75rem;
position:relative;
transition:border-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1), background .35s ease, box-shadow .35s ease;
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.testi-card::before {
content:'"';
position:absolute;
top:.7rem; right:1.2rem;
font-family:'Fraunces', Georgia, serif;
font-size:3.5rem;
line-height:1;
font-weight:700;
background:linear-gradient(135deg, #5def95, #3fb4c3, #2684e9);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
opacity:.4;
pointer-events:none;
}
.testi-card:hover {
border-color:rgba(93,239,149,.35);
transform:translateY(-3px);
background:rgba(255,255,255,.055);
box-shadow:0 12px 36px rgba(0,0,0,.35), 0 0 32px rgba(93,239,149,.08);
}
.testi-card blockquote {
margin:0 0 1.25rem;
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:.95rem;
font-style:italic;
line-height:1.62;
color:rgba(248,248,224,.85);
padding-right:1.5rem;
}
.testi-card-who {
display:flex; align-items:center; gap:.75rem;
padding-top:1rem;
border-top:1px solid rgba(248,248,224,.08);
}
.testi-card-av {
width:38px; height:38px; flex-shrink:0;
border-radius:50%;
background:linear-gradient(135deg, rgba(93,239,149,.18), rgba(38,132,233,.14));
border:1px solid rgba(93,239,149,.3);
display:flex; align-items:center; justify-content:center;
}
.testi-card-av img { width:18px; height:18px; object-fit:contain; }
.testi-card-name {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.82rem; font-weight:700;
color:rgba(248,248,224,.92);
line-height:1.2;
}
.testi-card-role {
font-family:'JetBrains Mono', monospace;
font-size:.62rem; font-weight:500;
color:rgba(248,248,224,.55);
letter-spacing:.08em; text-transform:uppercase;
margin-top:.25rem;
line-height:1.3;
}
/* Hide original grid when marquee is in use */
.testi-light.testi-light--marquee .testi-grid { display:none !important; }
/* Reduced motion — stop marquee */
@media (prefers-reduced-motion:reduce) {
.testi-marquee-track { animation:none !important; transform:none !important; }
.testi-marquee { overflow-x:auto; mask-image:none; -webkit-mask-image:none; }
}
/* Light theme overrides */
[data-theme="light"] .testi-card {
background:rgba(255,255,255,.9);
border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .testi-card blockquote { color:rgba(26,26,30,.82); }
[data-theme="light"] .testi-card-name { color:rgba(26,26,30,.95); }
[data-theme="light"] .testi-card-role { color:rgba(26,26,30,.55); }
[data-theme="light"] .testi-card:hover { background:rgba(255,255,255,1); box-shadow:0 12px 36px rgba(0,0,0,.1); }
[data-theme="light"] .testi-card-who { border-top-color:rgba(0,0,0,.08); }
/* Mobile — single row, narrower cards that fit viewport properly */
@media (max-width:700px) {
.testi-marquee {
padding:.5rem 0;
margin-left:-1rem;
margin-right:-1rem;
mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.testi-marquee-row--right { display:none; }
.testi-marquee-track { gap:.85rem; animation-duration:45s; padding-right:.85rem; }
.testi-card {
flex:0 0 78vw;
max-width:320px;
padding:1.25rem;
box-sizing:border-box;
}
.testi-card blockquote { font-size:.88rem; line-height:1.55; padding-right:.5rem; }
.testi-card::before { font-size:2.5rem; top:.5rem; right:.9rem; }
.testi-card-who { padding-top:.75rem; gap:.6rem; }
.testi-card-name { font-size:.76rem; }
.testi-card-role { font-size:.56rem; }
}
.testi { background:var(--bg-card); border:1px solid var(--b); border-radius:16px; padding:2.25rem; position:relative; transition:border-color .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); }
.testi:hover { transform:translateY(-3px); }
.testi:hover { border-color:var(--b2); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.testi::before { content:'"'; position:absolute; top:.5rem; right:1.25rem; font-size:4rem; color:var(--teal); opacity:.08; font-family:Georgia,serif; line-height:1; }
.testi blockquote { font-size:1.05rem; color:var(--muted); line-height:1.8; font-style:italic; margin-bottom:1.25rem; }
.testi-who { display:flex; align-items:center; gap:.85rem; }
.testi-av { width:42px; height:42px; border-radius:50%; background:rgba(77,206,175,.1); border:1px solid rgba(77,206,175,.2); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.testi-name { font-weight:600; font-size:.88rem; }
.testi-role { font-size:.85rem; color:var(--dim); margin-top:1px; }
/* ════════════════════════════════════════════════════════════════
SERVICE PAGE HERO
════════════════════════════════════════════════════════════════ */
.svc-hero { position:relative; overflow:clip; background:var(--bg1); border-bottom:none; padding:4rem 2.5rem; }
.svc-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 50% 80% at 85% 50%, rgba(77,206,175,.06) 0%, transparent 60%); }
/* Service hero with background media — cinematic upgrade (matches home-page .hero-x polish) */
.svc-hero--media { min-height:540px; display:flex; align-items:flex-end; padding-top:7rem; padding-bottom:4.5rem; isolation:isolate; margin-top:calc(var(--nav-h) * -1); }
.svc-hero--media .svc-hero-media {
position:absolute; inset:0; z-index:0;
overflow:hidden;
}
/* Ken Burns — slow drifting zoom on the hero image so it never feels static */
.svc-hero--media .svc-hero-media img,
.svc-hero--media .svc-hero-media video {
width:100%; height:100%; object-fit:cover; display:block;
filter:brightness(.78) contrast(1.08) saturate(1.05);
transform:scale(1.08);
animation:svcKenBurns 22s ease-in-out infinite alternate;
will-change:transform;
}
@keyframes svcKenBurns {
0% { transform:scale(1.08) translate(0, 0); }
100% { transform:scale(1.14) translate(-1.2%, -0.8%); }
}
@media (prefers-reduced-motion:reduce) {
.svc-hero--media .svc-hero-media img,
.svc-hero--media .svc-hero-media video { animation:none; transform:scale(1.08); }
}
/* Layered overlay — warm-black vignette + subtle brand wash + top gradient strip */
.svc-hero--media .svc-hero-overlay {
position:absolute; inset:0; z-index:1;
background:
/* top brand-gradient accent strip (1px hairline via gradient) */
linear-gradient(180deg, rgba(93,239,149,.12) 0%, transparent 2px),
/* left-column dark bias for text legibility */
linear-gradient(100deg, rgba(14,13,10,.85) 0%, rgba(14,13,10,.55) 35%, rgba(14,13,10,.25) 60%, rgba(14,13,10,.55) 100%),
/* vertical depth — gentle fade so next section blends without a heavy band */
linear-gradient(180deg, rgba(14,13,10,.18) 0%, rgba(14,13,10,.12) 30%, rgba(14,13,10,.45) 75%, rgba(14,13,10,.55) 100%),
/* corner brand wash on top-right */
radial-gradient(ellipse 45% 55% at 85% 15%, rgba(93,239,149,.12) 0%, transparent 60%),
/* bottom-left green wash */
radial-gradient(ellipse 35% 45% at 10% 85%, rgba(93,239,149,.08) 0%, transparent 65%);
}
/* Top precision scanline — 1px brand-gradient line running across the hero */
.svc-hero--media::before {
content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:5;
background:linear-gradient(90deg, transparent 0%, rgba(93,239,149,.5) 20%, rgba(63,180,195,.7) 50%, rgba(38,132,233,.5) 80%, transparent 100%);
pointer-events:none;
}
/* Grid overlay — subtle technical/engineering feel (drafting paper) */
.svc-hero--media::after {
content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
background-image:
linear-gradient(rgba(248,248,224,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(248,248,224,.035) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse 80% 100% at 50% 50%, black 10%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 50%, black 10%, transparent 80%);
opacity:.7;
}
.svc-hero--media > div:last-child { position:relative; z-index:3; }
/* HUD corner markers — borrowed from the home hero's language */
.svc-hero--media .svc-hero-media::before,
.svc-hero--media .svc-hero-media::after {
content:''; position:absolute; width:26px; height:26px; z-index:4;
border:1px solid rgba(93,239,149,.45);
box-shadow:0 0 10px rgba(93,239,149,.25);
pointer-events:none;
animation:svcHudIn .8s cubic-bezier(.22,1,.36,1) .4s both;
}
.svc-hero--media .svc-hero-media::before {
top:calc(var(--nav-h) + 1.25rem); left:1.5rem;
border-right:none; border-bottom:none;
border-top-left-radius:4px;
}
.svc-hero--media .svc-hero-media::after {
top:calc(var(--nav-h) + 1.25rem); right:1.5rem;
border-left:none; border-bottom:none;
border-top-right-radius:4px;
}
@keyframes svcHudIn { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@media(max-width:768px){
.svc-hero--media { min-height:420px; padding-top:5.5rem; padding-bottom:3rem; }
.svc-hero--media .svc-hero-media::before,
.svc-hero--media .svc-hero-media::after { width:18px; height:18px; }
}
/* Hero content entrance animation */
@keyframes heroFadeUp {
from { opacity:0; transform:translateY(24px); }
to { opacity:1; transform:translateY(0); }
}
.svc-hero--media .breadcrumb { animation:heroFadeUp .7s cubic-bezier(.4,0,.2,1) .1s both; }
.svc-hero--media .lbl { animation:heroFadeUp .7s cubic-bezier(.4,0,.2,1) .18s both; }
.svc-hero--media h1 { animation:heroFadeUp .7s cubic-bezier(.4,0,.2,1) .26s both; }
.svc-hero--media .svc-intro { animation:heroFadeUp .7s cubic-bezier(.4,0,.2,1) .34s both; }
.svc-hero--media .btn-p,
.svc-hero--media .btn-o { animation:heroFadeUp .7s cubic-bezier(.4,0,.2,1) .42s both; }
/* Service-page CTA buttons: natural width, content-driven sizing.
Rectangular shape comes from the global .btn-p/.btn-o radius (10px). */
.svc-hero .btn-p,
.svc-hero .btn-o {
flex:0 0 auto;
white-space:nowrap;
}
@media(max-width:560px){
.svc-hero .btn-p,
.svc-hero .btn-o {
flex:1 1 100%;
width:100%;
justify-content:center;
}
}
.svc-hero-inner { position:relative; z-index:1; max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 320px; gap:3rem; align-items:start; overflow:clip; }
/* Breadcrumb — pill style for visibility */
.breadcrumb {
display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:1.1rem; flex-wrap:wrap;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:.35rem .9rem;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
letter-spacing:.02em;
}
.crumb { cursor:pointer; transition:color .2s; color:rgba(255,255,255,.55); }
.crumb:hover { color:var(--teal); }
.sep-arrow { color:rgba(255,255,255,.3); font-size:.75rem; }
/* Hero label — enhanced with accent bar */
.svc-hero--media .lbl {
font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
margin-bottom:.9rem; display:flex; align-items:center; gap:10px;
text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.svc-hero--media .lbl::before {
content:''; width:28px; height:2px; background:var(--grad); border-radius:2px; flex-shrink:0;
}
/* Hero heading — MINT is THE OCGT color (recipe 1B "Signal Mint") */
.svc-hero h1 {
font-family: var(--f-head); font-weight:900; font-size:clamp(2.4rem, 5.5vw, 4.4rem);
letter-spacing:-.035em; line-height:1.02; margin-bottom:1.2rem;
color:#5def95;
text-shadow:
0 0 48px rgba(93,239,149,.22),
0 2px 12px rgba(0,0,0,.6),
0 1px 4px rgba(0,0,0,.55);
max-width:100%; word-wrap:break-word; overflow-wrap:break-word;
text-wrap:balance;
}
/* Teal accent underline for h1 — wider, animated draw-in */
.svc-hero--media h1::after {
content:''; display:block; width:0; height:3px; margin-top:1.1rem;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%); border-radius:2px;
box-shadow:0 0 14px rgba(93,239,149,.45);
animation:svcRuleDraw 1s cubic-bezier(.22,1,.36,1) .6s forwards;
}
@keyframes svcRuleDraw { from { width:0; } to { width:72px; } }
/* Hero intro — better readability */
.svc-intro {
font-size:clamp(.98rem, 1.2vw, 1.15rem); color:rgba(248,248,224,.86); max-width:640px; line-height:1.8; margin-bottom:1.75rem;
text-shadow:0 1px 10px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
font-weight:400;
}
.svc-intro em, .svc-intro strong em {
font-family:inherit;
font-style:normal; font-weight:inherit;
color:inherit;
background:none;
-webkit-background-clip:initial; -webkit-text-fill-color:currentColor; background-clip:initial;
}
/* Hero quick-stats strip — optional row of mono chips below intro, matches home .hero-x-panel-meta */
.svc-hero-meta {
display:inline-flex; align-items:center; flex-wrap:wrap; gap:.9rem;
padding:.75rem 1.1rem; margin-top:.5rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:rgba(248,248,224,.82);
background:rgba(14,13,10,.45);
backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
border:1px solid rgba(248,248,224,.14);
border-top:1px solid rgba(93,239,149,.28);
border-radius:999px;
box-shadow:0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) .5s both;
}
.svc-hero-meta .dot {
display:inline-block; width:5px; height:5px; border-radius:50%; background:rgba(248,248,224,.4);
}
.svc-hero-meta strong {
font-weight:800; color:#5def95;
}
/* ═══════════════════════════════════════════════════════════
BENTO REFERENCES GRID (p-refs upgrade)
Apple-style asymmetric masonry with hover scale + overlay reveal
═══════════════════════════════════════════════════════════ */
.refs-filter {
display:flex; gap:.5rem; flex-wrap:wrap;
margin-bottom:2rem;
padding-bottom:1.25rem;
border-bottom:1px solid var(--b);
}
.refs-filter-chip {
display:inline-flex; align-items:center; gap:.45rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted);
background:var(--bg-card); border:1px solid var(--b);
padding:.55rem 1rem;
border-radius:999px;
cursor:pointer;
transition:color .25s, background .25s, border-color .25s, transform .25s;
white-space:nowrap;
}
.refs-filter-chip:hover { color:var(--text); border-color:var(--b2); transform:translateY(-1px); }
.refs-filter-chip.is-active {
color:#0a1a14;
background:#5def95;
border-color:transparent;
box-shadow:0 4px 14px rgba(93,239,149,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
[data-theme="light"] .refs-filter-chip { background:var(--bg1); }
[data-theme="light"] .refs-filter-chip.is-active {
color:#f8f8e0;
background:#22C65F;
border-color:transparent;
}
[data-theme="light"] .contact-svc-chip.is-selected { color:#f8f8e0; background:#22C65F; }
.refs-bento {
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-auto-rows:220px;
gap:1rem;
grid-auto-flow:dense;
}
.refs-bento .ref-card {
grid-column:span 2; grid-row:span 1;
position:relative; overflow:hidden;
border-radius:20px;
background:var(--bg-card); border:1px solid var(--b);
cursor:pointer;
transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .5s cubic-bezier(.22,1,.36,1);
isolation:isolate;
display:block;
padding:0;
}
.refs-bento .ref-card.is-hidden { display:none; }
.refs-bento .ref-card:hover {
transform:translateY(-4px);
border-color:rgba(93,239,149,.35);
box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 40px rgba(93,239,149,.12);
}
/* Featured card variants — flagship projects get 2x2 / wide layout */
.refs-bento .ref-card--hero { grid-column:span 4; grid-row:span 2; }
.refs-bento .ref-card--wide { grid-column:span 4; grid-row:span 1; }
.refs-bento .ref-card--tall { grid-column:span 2; grid-row:span 2; }
/* Thumbnail + image become full-bleed inside the card */
.refs-bento .ref-card .ref-thumb {
position:absolute; inset:0; z-index:0;
height:100%; width:100%;
}
.refs-bento .ref-card .ref-thumb .img-ph { height:100% !important; border-radius:0; width:100%; }
.refs-bento .ref-card .ref-thumb img {
width:100%; height:100%; object-fit:cover; border-radius:0 !important;
transform:scale(1.02);
transition:transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
filter:brightness(.82) saturate(1.08);
}
.refs-bento .ref-card:hover img { transform:scale(1.09); filter:brightness(.95) saturate(1.12); }
/* Dark gradient so text stays readable on any image */
.refs-bento .ref-card::before {
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(14,13,10,.15) 0%, rgba(14,13,10,.1) 35%, rgba(14,13,10,.8) 100%);
transition:background .4s ease;
}
.refs-bento .ref-card:hover::before {
background:linear-gradient(180deg, rgba(14,13,10,.35) 0%, rgba(14,13,10,.45) 40%, rgba(14,13,10,.92) 100%);
}
/* Top-right category chip */
.refs-bento .ref-card .ref-type {
position:absolute; top:1rem; right:1rem; z-index:3;
font-family:'JetBrains Mono', monospace;
font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:rgba(248,248,224,.95);
background:rgba(14,13,10,.55);
backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
border:1px solid rgba(248,248,224,.22);
border-top:1px solid rgba(93,239,149,.4);
padding:.4rem .75rem;
border-radius:999px;
box-shadow:0 2px 12px rgba(0,0,0,.3);
white-space:nowrap;
max-width:calc(100% - 2rem);
overflow:hidden; text-overflow:ellipsis;
}
/* Body content slides up from bottom */
.refs-bento .ref-card .ref-body {
position:absolute; bottom:0; left:0; right:0; z-index:2;
padding:1.4rem 1.4rem 1.5rem;
color:#f8f8e0;
transform:translateY(0);
transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.refs-bento .ref-card .ref-body h3 {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1rem, 1.3vw, 1.25rem);
font-weight:800; line-height:1.15; letter-spacing:-.02em;
color:#f8f8e0; margin:0 0 .5rem 0;
text-shadow:0 1px 8px rgba(0,0,0,.6);
text-wrap:balance;
}
.refs-bento .ref-card--hero .ref-body h3 { font-size:clamp(1.4rem, 2vw, 1.85rem); }
.refs-bento .ref-card .ref-body p {
font-size:.88rem; line-height:1.55;
color:rgba(248,248,224,.78);
margin:0 0 .75rem 0;
max-height:0; overflow:hidden; opacity:0;
transition:max-height .4s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin .4s ease;
}
.refs-bento .ref-card:hover .ref-body p {
max-height:120px; opacity:1; margin:0 0 .75rem 0;
}
.refs-bento .ref-card .ref-meta {
display:flex; gap:.45rem; flex-wrap:wrap;
font-family:'JetBrains Mono', monospace;
font-size:.64rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.refs-bento .ref-card .ref-meta span {
display:inline-block;
padding:.25rem .6rem;
color:rgba(248,248,224,.7);
background:rgba(14,13,10,.45);
border:1px solid rgba(248,248,224,.1);
border-radius:999px;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
/* Small "open" affordance bottom-right */
.refs-bento .ref-card::after {
content:'↗'; position:absolute; bottom:1.2rem; right:1.2rem; z-index:3;
width:34px; height:34px;
display:flex; align-items:center; justify-content:center;
font-size:1rem; font-weight:900;
color:#0a1a14;
background:#5def95;
border-radius:50%;
opacity:0; transform:translate(8px, -8px) scale(.8);
transition:all .4s cubic-bezier(.22,1,.36,1);
box-shadow:0 4px 14px rgba(93,239,149,.5);
}
.refs-bento .ref-card:hover::after { opacity:1; transform:translate(0, 0) scale(1); }
/* Responsive collapse for bento */
@media (max-width:1000px) {
.refs-bento { grid-template-columns:repeat(4, 1fr); grid-auto-rows:200px; }
.refs-bento .ref-card--hero { grid-column:span 4; grid-row:span 2; }
.refs-bento .ref-card--wide { grid-column:span 4; }
.refs-bento .ref-card--tall { grid-column:span 2; grid-row:span 2; }
}
@media (max-width:640px) {
/* Stacked card layout: image on top (16:9), body content below in a
clean readable block — no text-on-image overlay (the dark gradient
fights against legibility on a small phone screen). */
.refs-bento { grid-template-columns:1fr; grid-auto-rows:auto; gap:1.25rem; }
.refs-bento .ref-card,
.refs-bento .ref-card--hero,
.refs-bento .ref-card--wide,
.refs-bento .ref-card--tall {
grid-column:span 1; grid-row:span 1;
display:flex; flex-direction:column;
height:auto;
}
.refs-bento .ref-card .ref-thumb {
position:relative; inset:auto;
aspect-ratio:16/9; width:100%; height:auto;
flex-shrink:0;
}
.refs-bento .ref-card::before {
background:linear-gradient(180deg, transparent 60%, rgba(14,13,10,.5) 100%);
inset:auto 0 auto 0; height:0;
}
.refs-bento .ref-card .ref-type {
top:.7rem; right:.7rem;
}
.refs-bento .ref-card .ref-body {
position:relative; inset:auto;
padding:1.1rem 1.2rem 1.25rem;
background:transparent;
}
.refs-bento .ref-card .ref-body h3 {
font-size:1.05rem;
text-shadow:none;
color:var(--text);
margin-bottom:.55rem;
}
.refs-bento .ref-card .ref-body p {
max-height:none; opacity:1; overflow:visible;
font-size:.85rem; line-height:1.55;
color:var(--muted);
margin:0 0 .85rem 0;
}
.refs-bento .ref-card .ref-meta {
margin-top:.25rem;
}
.refs-bento .ref-card .ref-meta span {
background:rgba(77,206,175,.06);
border-color:var(--b);
color:var(--muted);
}
/* Hide the floating ↗ — entire card is tap-target on mobile */
.refs-bento .ref-card::after { display:none; }
}
/* ═══════════════════════════════════════════════════════════
ENHANCED SERVICE CARDS (p-geotechnik, p-rc)
Hover reveals a preview image; card background fades to gradient
═══════════════════════════════════════════════════════════ */
.svc-card {
position:relative;
isolation:isolate;
overflow:hidden;
}
.svc-card[data-img] .svc-card-img {
position:absolute; inset:0; z-index:0;
opacity:0; pointer-events:none;
transition:opacity .5s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
transform:scale(1.05);
}
.svc-card[data-img] .svc-card-img::before {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(14,13,10,.72) 0%, rgba(14,13,10,.88) 60%, rgba(14,13,10,.95) 100%);
z-index:1;
}
.svc-card[data-img] .svc-card-img img {
width:100%; height:100%; object-fit:cover;
filter:saturate(1.1) brightness(.65);
}
.svc-card[data-img]:hover .svc-card-img { opacity:1; transform:scale(1); }
.svc-card[data-img]:hover .svc-card-img img { /* further zoom on hover */ }
.svc-card > * { position:relative; z-index:2; }
.svc-card[data-img]:hover h3 { color:#f8f8e0; }
.svc-card[data-img]:hover p { color:rgba(248,248,224,.82); }
.svc-card[data-img]:hover .code { color:#5def95; opacity:1; }
.svc-card .arr svg,
.svc-card .arr-icon {
width:13px; height:13px;
}
/* Border gradient on hover */
.svc-card[data-img]::after {
content:''; position:absolute; inset:-1px;
border-radius:inherit; padding:1px;
background:linear-gradient(140deg, rgba(93,239,149,.55) 0%, rgba(93,239,149,.25) 50%, transparent 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none;
opacity:0;
transition:opacity .4s ease;
z-index:3;
}
.svc-card[data-img]:hover::after { opacity:1; }
/* ─── Mint icon badges for service pages ── matches home Geotechnik bento aesthetic ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-icon {
width:48px; height:48px;
border-radius:14px;
background:linear-gradient(135deg, #5def95 0%, #6FF5A6 100%);
color:#0a1a14;
display:inline-flex; align-items:center; justify-content:center;
margin:0 auto .7rem;
box-shadow:0 1px 2px rgba(10,26,20,.08), 0 4px 14px rgba(93,239,149,.32);
transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-icon svg { width:24px; height:24px; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-icon iconify-icon { font-size:24px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .three-col > div:hover .geo-icon {
transform:translateY(-2px) scale(1.05);
box-shadow:0 2px 6px rgba(10,26,20,.1), 0 8px 24px rgba(93,239,149,.45);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card .icon {
width:46px; height:46px;
border-radius:13px;
background:linear-gradient(135deg, #5def95 0%, #6FF5A6 100%) !important;
color:#0a1a14;
border:none !important;
box-shadow:0 1px 2px rgba(10,26,20,.08), 0 4px 14px rgba(93,239,149,.3);
transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card .icon svg { width:23px; height:23px; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card .icon iconify-icon { font-size:23px; width:23px; height:23px; display:inline-flex; align-items:center; justify-content:center; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card:hover .icon {
transform:scale(1.06);
box-shadow:0 2px 6px rgba(10,26,20,.12), 0 8px 24px rgba(93,239,149,.48);
background:linear-gradient(135deg, #5def95 0%, #6FF5A6 100%) !important;
}
/* ═══════════════════════════════════════════════════════════
GEO FEATURE CARDS — editorial numbered bento for the
"Baugrund / Bau / Risiken" trio under "Was ist Geotechnik?"
Mirrors the home page .bento-tile lift-on-hover language.
═══════════════════════════════════════════════════════════ */
.geo-feat-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1.25rem;
}
@media (max-width:820px){ .geo-feat-grid{ grid-template-columns:1fr; } }
.geo-feat-card {
position:relative; overflow:hidden;
padding:1.6rem 1.5rem 1.4rem;
background:var(--bg2);
border:1px solid var(--b);
border-radius:var(--r);
text-align:left;
isolation:isolate;
transition:
transform .4s cubic-bezier(.2,.7,.2,1),
border-color .4s ease,
box-shadow .4s ease,
background .4s ease;
}
/* Light theme — clean white card on cream wrapper, with soft elevation
(matches .rel-card / .leis-card lift language) */
[data-theme="light"] .geo-feat-card {
background:var(--bg-card);
border-color:rgba(0,0,0,.06);
box-shadow:0 2px 12px var(--card-shadow);
}
/* Uniform atmospheric gradient across all cards (theme-aware) */
.geo-feat-card::before {
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:.55;
background:radial-gradient(ellipse 120% 80% at 100% 0%, rgba(93,239,149,.12), transparent 55%);
transition:opacity .5s ease;
}
[data-theme="light"] .geo-feat-card::before {
opacity:1;
background:radial-gradient(ellipse 120% 80% at 100% 0%, rgba(34,198,95,.10), transparent 55%);
}
/* Decorative outline numeral (top-right, faded) */
.geo-feat-deco {
position:absolute; top:.7rem; right:1rem; z-index:0;
font-family:var(--f-head);
font-size:5.5rem; font-weight:800;
line-height:1; letter-spacing:-.05em;
color:transparent;
-webkit-text-stroke:1px var(--text);
opacity:.07;
pointer-events:none;
transition:opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
[data-theme="light"] .geo-feat-deco { opacity:.13; -webkit-text-stroke:1.2px var(--text); }
/* Override centred .geo-icon margin for these cards — left-aligned */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card .geo-icon {
margin:0 0 1rem 0;
}
.geo-feat-title {
position:relative; z-index:2;
font-family:var(--f-head);
font-size:1.05rem; font-weight:700;
letter-spacing:-.005em;
color:var(--text);
margin-bottom:.45rem;
}
.geo-feat-desc {
position:relative; z-index:2;
font-size:.86rem; line-height:1.55;
color:var(--muted);
margin-bottom:1.1rem;
}
/* Hover-reveal arrow chip (bottom-left) */
.geo-feat-arrow {
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:.4rem;
font-family:var(--f-head);
font-size:.72rem; font-weight:700;
letter-spacing:.08em; text-transform:uppercase;
color:var(--muted);
opacity:.9;
transition:color .3s ease, opacity .3s ease, gap .3s ease;
}
.geo-feat-arrow svg {
width:14px; height:14px;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.geo-feat-arrow iconify-icon {
font-size:14px; width:14px; height:14px;
display:inline-flex; align-items:center; justify-content:center;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.geo-feat-card:hover .geo-feat-arrow {
color:var(--teal); opacity:1; gap:.65rem;
}
.geo-feat-card:hover .geo-feat-arrow svg { transform:translateX(3px); }
.geo-feat-card:hover .geo-feat-arrow iconify-icon { transform:translateX(3px); }
/* Hover state — matches home bento lift language */
.geo-feat-card:hover,
.geo-feat-card:focus-visible {
transform:translateY(-4px);
border-color:rgba(93,239,149,.4);
background:var(--bg-card);
box-shadow:0 22px 50px -24px rgba(0,0,0,.5), 0 0 0 1px rgba(93,239,149,.15) inset;
outline:none;
}
[data-theme="light"] .geo-feat-card:hover,
[data-theme="light"] .geo-feat-card:focus-visible {
border-color:rgba(42,157,143,.45);
box-shadow:0 18px 40px -20px rgba(20,22,26,.18), 0 6px 14px -8px rgba(20,22,26,.08), 0 0 0 1px rgba(42,157,143,.18) inset;
}
.geo-feat-card:hover::before { opacity:1; }
.geo-feat-card:hover .geo-feat-deco {
opacity:.16;
transform:translate(-4px, 4px);
}
[data-theme="light"] .geo-feat-card:hover .geo-feat-deco { opacity:.22; }
/* Mint icon already styled by .geo-icon rule above — hover rule below */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card:hover .geo-icon {
transform:translateY(-2px) scale(1.05);
box-shadow:0 2px 6px rgba(10,26,20,.1), 0 8px 24px rgba(93,239,149,.45);
}
/* Reveal the card on scroll using existing .rv pattern */
.geo-feat-card.rv { /* picks up .rv keyframes automatically */ }
/* ═══════════════════════════════════════════════════════════
ABOUT — COMPANY TIMELINE (p-about)
Horizontal milestone track with gradient connector
═══════════════════════════════════════════════════════════ */
.about-timeline {
position:relative;
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:1rem;
margin:2.5rem 0 3.5rem;
padding:0;
}
.about-timeline::before {
content:''; position:absolute;
top:20px; left:3%; right:3%; height:2px;
background:rgba(93,239,149,.55);
border-radius:2px;
box-shadow:0 0 14px rgba(93,239,149,.28);
}
.about-tl-step {
position:relative;
text-align:center;
padding-top:3rem;
}
.about-tl-step::before {
content:''; position:absolute; top:13px; left:50%; transform:translateX(-50%);
width:15px; height:15px; border-radius:50%;
background:#5def95;
box-shadow:0 0 0 4px var(--bg), 0 0 14px rgba(93,239,149,.5);
z-index:2;
}
.about-tl-step.is-current::before {
animation:tlDotPulse 2s ease-in-out infinite;
}
@keyframes tlDotPulse {
0%,100% { box-shadow:0 0 0 4px var(--bg), 0 0 14px rgba(93,239,149,.45); }
50% { box-shadow:0 0 0 4px var(--bg), 0 0 22px rgba(93,239,149,.75); }
}
.about-tl-year {
font-family: var(--f-mono);
font-size:.78rem; font-weight:700;
letter-spacing:.1em;
color:#5def95;
margin-bottom:.4rem;
}
.about-tl-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:.95rem; font-weight:700;
color:var(--text);
margin-bottom:.35rem;
text-wrap:balance;
}
.about-tl-desc {
font-size:.82rem;
color:var(--muted);
line-height:1.55;
text-wrap:balance;
}
@media (max-width:800px) {
.about-timeline { grid-template-columns:1fr; gap:1.25rem; }
.about-timeline::before {
top:0; bottom:0; left:20px; right:auto; width:2px; height:auto;
background:linear-gradient(180deg, rgba(93,239,149,.7) 0%, rgba(63,180,195,.7) 50%, rgba(38,132,233,.7) 100%);
}
.about-tl-step { text-align:left; padding-top:0; padding-left:3rem; padding-bottom:.5rem; }
.about-tl-step::before { top:0; left:20px; transform:translate(-50%, 0); }
}
/* ═══════════════════════════════════════════════════════════
ABOUT — PULL QUOTE (founder-style manifesto block)
═══════════════════════════════════════════════════════════ */
.about-pullquote {
position:relative;
margin:4rem 0;
padding:3rem 2.5rem 3.5rem;
background:linear-gradient(135deg, rgba(93,239,149,.06) 0%, rgba(63,180,195,.06) 50%, rgba(38,132,233,.04) 100%);
border:1px solid var(--b2);
border-radius:20px;
overflow:hidden;
isolation:isolate;
}
.about-pullquote::before {
content:'"'; position:absolute; top:-20px; left:24px;
font-family:'Fraunces', Georgia, serif;
font-size:10rem; line-height:1;
color:rgba(93,239,149,.18);
z-index:0; pointer-events:none;
}
.about-pullquote::after {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
border-radius:2px;
box-shadow:0 0 12px rgba(93,239,149,.3);
}
.about-pullquote blockquote {
position:relative; z-index:1;
font-family:'Fraunces', Georgia, 'Times New Roman', serif;
font-style:italic; font-weight:400;
font-size:clamp(1.35rem, 2.4vw, 1.9rem);
line-height:1.4;
color:var(--text);
max-width:780px;
margin:0 0 1.5rem 0;
text-wrap:balance;
letter-spacing:-.005em;
}
.about-pullquote blockquote em {
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
font-style:italic;
font-weight:600;
}
.about-pullquote cite {
display:flex; align-items:center; gap:.9rem;
font-style:normal;
font-family:'DM Sans', system-ui, sans-serif;
font-size:.88rem; font-weight:500;
color:var(--muted);
}
.about-pullquote cite::before {
content:''; width:36px; height:1px; background:var(--grad); border-radius:2px;
}
.about-pullquote cite strong { color:var(--text); font-weight:700; margin-right:.4rem; }
/* ═══════════════════════════════════════════════════════════
TECH — EQUIPMENT SHOWCASE GRID (p-tech)
═══════════════════════════════════════════════════════════ */
.tech-equip-grid {
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:1.25rem;
margin:2rem 0 3rem;
}
.tech-equip {
position:relative;
background:var(--bg-card);
border:1px solid var(--b);
border-radius:18px;
overflow:hidden;
isolation:isolate;
transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .4s;
display:flex; flex-direction:column;
min-height:300px;
}
.tech-equip:hover {
transform:translateY(-3px);
border-color:rgba(93,239,149,.32);
box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 40px rgba(93,239,149,.1);
}
.tech-equip-img {
position:relative;
height:180px;
overflow:hidden;
background:#0a0908;
}
.tech-equip-img img {
width:100%; height:100%; object-fit:cover;
filter:saturate(1.1) contrast(1.05);
transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.tech-equip:hover .tech-equip-img img { transform:scale(1.08); }
.tech-equip-img::after {
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(14,13,10,.15) 0%, transparent 40%, rgba(14,13,10,.7) 100%);
pointer-events:none;
}
.tech-equip-badge {
position:absolute; top:.85rem; left:.85rem; z-index:2;
font-family:'JetBrains Mono', monospace;
font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:#f8f8e0;
background:rgba(14,13,10,.55);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border:1px solid rgba(93,239,149,.32);
padding:.35rem .7rem;
border-radius:999px;
}
.tech-equip-body {
padding:1.35rem 1.5rem 1.5rem;
flex:1;
display:flex; flex-direction:column;
}
.tech-equip-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:1.2rem; font-weight:800;
color:var(--text);
margin-bottom:.5rem;
letter-spacing:-.015em;
}
.tech-equip-desc {
font-size:.92rem;
color:var(--muted);
line-height:1.65;
margin-bottom:1rem;
}
.tech-equip-specs {
margin-top:auto;
display:flex; gap:.45rem; flex-wrap:wrap;
}
.tech-equip-spec {
font-family: var(--f-mono);
font-size:.68rem; font-weight:700; letter-spacing:.08em;
color:#2684E9; /* BLUE = measurement/precision */
background:rgba(38,132,233,.08);
border:1px solid rgba(38,132,233,.25);
padding:.3rem .6rem;
border-radius:6px;
}
@media (max-width:768px) {
.tech-equip-grid { grid-template-columns:1fr; }
.tech-equip-img { height:200px; }
}
/* ═══════════════════════════════════════════════════════════
TECH — ACCURACY LADDER (visualize tech on a ±mm/cm scale)
═══════════════════════════════════════════════════════════ */
.accuracy-ladder {
margin:3rem 0;
padding:2rem 2.5rem 2.25rem;
background:var(--bg-card);
border:1px solid var(--b);
border-radius:20px;
position:relative;
overflow:hidden;
}
.accuracy-ladder::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:#5def95;
box-shadow:0 0 16px rgba(93,239,149,.4);
}
.accuracy-ladder-title {
font-family:'JetBrains Mono', monospace;
font-size:.78rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:var(--teal);
margin-bottom:1.25rem;
}
.accuracy-track {
position:relative;
height:4px;
background:rgba(93,239,149,.22);
border-radius:2px;
margin:4.5rem 1rem 4.5rem;
}
.accuracy-mark {
position:absolute; top:50%; transform:translate(-50%, -50%);
width:14px; height:14px;
border-radius:50%;
background:#5def95;
box-shadow:0 0 0 4px var(--bg-card), 0 0 14px rgba(93,239,149,.5);
}
.accuracy-mark-label {
position:absolute;
font-family:'JetBrains Mono', monospace;
font-size:.7rem; font-weight:700;
letter-spacing:.08em;
color:var(--text);
white-space:nowrap;
width:max-content;
padding:.35rem .65rem;
background:var(--bg2);
border:1px solid var(--b);
border-radius:999px;
}
.accuracy-mark-label.above { bottom:calc(100% + 16px); left:50%; transform:translateX(-50%); }
.accuracy-mark-label.below { top:calc(100% + 16px); left:50%; transform:translateX(-50%); }
.accuracy-mark-label small { display:block; color:#2684E9; font-weight:600; font-size:.62rem; margin-top:.15rem; letter-spacing:.03em; }
.accuracy-scale {
display:flex; justify-content:space-between;
font-family:'JetBrains Mono', monospace;
font-size:.68rem; color:var(--dim);
letter-spacing:.08em; text-transform:uppercase;
margin-top:1rem;
}
/* Accuracy ladder mobile: convert horizontal track to vertical list — five
absolutely-positioned labels can't fit on a 375px-wide track without
overlapping. Each method becomes a clean row: [dot] [name] [precision]. */
@media (max-width:640px) {
.accuracy-ladder { padding:1.5rem 1.25rem; margin:2rem 0; }
.accuracy-ladder-title { font-size:.7rem; margin-bottom:1rem; }
.accuracy-track {
display:flex; flex-direction:column; gap:.5rem;
height:auto; background:transparent;
margin:.5rem 0;
}
.accuracy-mark {
position:relative; top:auto; left:auto !important;
transform:none;
width:auto; height:auto;
background:transparent; box-shadow:none;
border-radius:0;
display:flex; align-items:center; gap:.65rem;
padding:.55rem .75rem;
border:1px solid var(--b);
background:var(--bg2);
border-radius:10px;
}
.accuracy-mark::before {
content:''; flex-shrink:0;
width:10px; height:10px; border-radius:50%;
background:#5def95;
box-shadow:0 0 10px rgba(93,239,149,.5);
}
.accuracy-mark-label {
position:relative; bottom:auto; top:auto; left:auto !important;
transform:none !important;
padding:0; background:transparent; border:0;
display:flex; align-items:baseline; justify-content:space-between;
width:100%; font-size:.78rem;
white-space:normal;
}
.accuracy-mark-label small {
display:inline; margin:0; font-size:.7rem;
color:var(--teal); font-weight:700;
}
.accuracy-scale { display:none; }
}
/* ═══════════════════════════════════════════════════════════
CONTACT — ENHANCED LAYOUT (p-contact)
Sticky form + service-picker chips + left-column trust accent
═══════════════════════════════════════════════════════════ */
.contact-grid {
display:grid;
grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
gap:3rem;
align-items:flex-start;
}
@media (max-width:900px) {
.contact-grid { grid-template-columns:1fr; gap:2rem; }
}
.contact-grid > div:nth-child(2) {
position:sticky;
top:calc(var(--nav-h) + 1.5rem);
align-self:flex-start;
}
@media (max-width:900px) {
.contact-grid > div:nth-child(2) { position:static; }
}
/* Service-pick chip row at the top of the contact form (click to pre-select dropdown) */
.contact-svc-picker {
display:flex; flex-wrap:wrap; gap:.5rem;
margin-bottom:1.5rem;
padding-bottom:1.25rem;
border-bottom:1px solid var(--b);
}
.contact-svc-picker-lbl {
width:100%;
font-family:'JetBrains Mono', monospace;
font-size:.7rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:var(--teal);
margin-bottom:.5rem;
}
.contact-svc-chip {
display:inline-flex; align-items:center; gap:.4rem;
font-family:'DM Sans', system-ui, sans-serif;
font-size:.82rem; font-weight:500;
color:var(--muted);
background:var(--bg-card);
border:1px solid var(--b);
padding:.5rem .95rem;
border-radius:999px;
cursor:pointer;
transition:color .25s, background .25s, border-color .25s, transform .25s;
}
.contact-svc-chip:hover {
color:var(--text); border-color:var(--b2); transform:translateY(-1px);
}
.contact-svc-chip.is-selected {
color:#0a1a14;
background:#5def95;
border-color:transparent;
box-shadow:0 4px 14px rgba(93,239,149,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
[data-theme="light"] .contact-svc-chip.is-selected { color:#f8f8e0; }
/* ═══════════════════════════════════════════════════════════
LIGHT-THEME ADJUSTMENTS for the new components
═══════════════════════════════════════════════════════════ */
[data-theme="light"] .refs-bento .ref-card { background:var(--bg1); border-color:var(--b); }
[data-theme="light"] .refs-bento .ref-card .ref-type { background:rgba(14,13,10,.6); color:#f8f8e0; border-color:rgba(248,248,224,.2); }
[data-theme="light"] .about-pullquote blockquote { color:var(--text); }
[data-theme="light"] .tech-equip { background:var(--bg1); }
[data-theme="light"] .accuracy-ladder { background:var(--bg1); }
[data-theme="light"] .accuracy-mark-label { background:var(--bg1); border-color:var(--b); }
/* Force dark hero treatment in BOTH themes for visibility against video */
[data-theme="light"] .svc-hero { background:var(--bg1); }
[data-theme="light"] .svc-hero h1 { color:#5def95; text-shadow:0 0 48px rgba(93,239,149,.28), 0 2px 18px rgba(0,0,0,.55), 0 1px 6px rgba(0,0,0,.4); }
[data-theme="light"] .svc-intro { color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.7), 0 1px 1px rgba(0,0,0,.5); }
[data-theme="light"] .svc-hero--media .svc-hero-overlay { background:linear-gradient(180deg, rgba(19,19,21,.30) 0%, rgba(19,19,21,.40) 25%, rgba(19,19,21,.55) 60%, rgba(19,19,21,.62) 90%, rgba(19,19,21,.55) 100%); }
[data-theme="light"] .svc-hero--media .lbl { color:#5def95; text-shadow:0 1px 8px rgba(0,0,0,.6); }
[data-theme="light"] .svc-hero .breadcrumb { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.7); }
[data-theme="light"] .svc-hero .crumb { color:rgba(255,255,255,.7); }
[data-theme="light"] .svc-hero .crumb:hover { color:#5def95; }
[data-theme="light"] .svc-hero .sep-arrow { color:rgba(255,255,255,.4); }
.cta-box { background:var(--bg); border:1px solid var(--b); border-radius:var(--r); padding:1.75rem; position:sticky; top:calc(var(--nav-h) + 1rem); }
.cta-box h3, .cta-box h4 { font-family:var(--f-head); font-size:1rem; margin-bottom:.4rem; }
.cta-box p { font-size:.8rem; color:var(--muted); margin-bottom:1.2rem; }
.related-list li + li { border-top:1px solid var(--b); }
.related-list li button { width:100%; text-align:left; padding:.75rem 0; background:none; border:none; color:var(--muted); font-size:.82rem; cursor:pointer; display:flex; align-items:center; gap:8px; transition:color .15s; font-family:var(--f-body); }
.related-list li button:hover { color:var(--teal); }
/* ════════════════════════════════════════════════════════════════
LEISTUNGEN GRID
════════════════════════════════════════════════════════════════ */
/* ─── Service cards — "Image Reveal" cinematic hover (Stripe × Webflow) ───
Idle: clean dark card with icon (top-left), heading, body.
Hover: contextual photo fades in behind a dark gradient overlay,
heading lifts, neon mint "→" arrow button materializes
bottom-right.
Two pseudos on .leis-card:
::before → layered: dark gradient + page hero image (image hidden
until hover via opacity)
::after → the bottom-right arrow button.
All real content (icon, h3, p) sits on z-index 1 above both pseudos. */
.leis-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
gap:1.5rem;
margin:2.5rem 0;
}
.leis-card {
position:relative;
background:var(--bg-card);
border:1px solid var(--b);
border-radius:14px;
padding:1.85rem 1.85rem 3.4rem;
isolation:isolate;
overflow:hidden;
cursor:pointer;
transition:transform .55s cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .55s cubic-bezier(.22,1,.36,1);
}
/* Image + gradient layer (single pseudo, layered backgrounds).
The dark linear-gradient is always on top of the image so text remains
readable; the whole layer fades in on hover. */
.leis-card::before {
content:'';
position:absolute; inset:0; z-index:0;
background:
linear-gradient(165deg, rgba(14,13,10,.92) 0%, rgba(14,13,10,.74) 50%, rgba(14,13,10,.92) 100%),
var(--leis-img, none) center/cover no-repeat;
opacity:0;
transform:scale(1.06);
transition:opacity .55s cubic-bezier(.22,1,.36,1),
transform 1.4s cubic-bezier(.22,1,.36,1);
pointer-events:none;
}
/* Bottom-right arrow button (CSS-only, positioned relative to the card).
Hidden by default; pops + slides in on hover. */
.leis-card::after {
content:'→';
position:absolute;
right:1.4rem;
bottom:1.15rem;
z-index:2;
width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
font-family:var(--f-head);
font-size:1.05rem; font-weight:800;
color:#0a1a14;
background:#5def95;
border-radius:50%;
box-shadow:0 6px 18px rgba(93,239,149,.48), 0 0 0 0 rgba(93,239,149,.4);
opacity:0;
transform:translate(8px, 8px) scale(.7);
transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
pointer-events:none;
}
/* Real content sits above both pseudos */
.leis-card > .leis-icon,
.leis-card > h3,
.leis-card > h4,
.leis-card > p {
position:relative;
z-index:1;
}
.leis-card:hover {
transform:translateY(-4px);
border-color:rgba(93,239,149,.4);
box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 50px rgba(93,239,149,.12);
}
.leis-card:hover::before { opacity:1; transform:scale(1); }
.leis-card:hover::after {
opacity:1; transform:translate(0,0) scale(1);
box-shadow:0 10px 26px rgba(93,239,149,.55), 0 0 0 8px rgba(93,239,149,.12);
}
/* Per-page image variable — each card on a service page reveals that
page's hero image on hover, so cards become movie-poster previews. */
:is(#p-geotechnik) .leis-card { --leis-img:url('/marketing/IMG_20200930_172613_mix01.jpg'); }
:is(#p-a1) .leis-card { --leis-img:url('/marketing/P1021262.JPG'); }
:is(#p-a2) .leis-card { --leis-img:url('/marketing/signal-2021-06-08-160647.jpg'); }
:is(#p-a3) .leis-card { --leis-img:url('/Images/20180129_101219_stitch.jpg'); }
:is(#p-a4) .leis-card { --leis-img:url('/Images/20180327_101759.jpg'); }
:is(#p-b1) .leis-card { --leis-img:url('/Images/dronestep1.jpg'); }
:is(#p-b2) .leis-card { --leis-img:url('/marketing/IMG_20200911_151619_962_mix01.jpg'); }
:is(#p-b3) .leis-card { --leis-img:url('/marketing/IMG_20201103_113250.jpg'); }
:is(#p-b4) .leis-card { --leis-img:url('/marketing/Fischerstrasse-11-01-Dollhouse-View.jpg'); }
:is(#p-b5) .leis-card { --leis-img:url('/marketing/IMG_20210603_171938.jpg'); }
:is(#p-b6) .leis-card { --leis-img:url('/marketing/IMG_20200924_133843.jpg'); }
:is(#p-b7) .leis-card { --leis-img:url('/marketing/Oldtimer_21-06-21_16_9_mw_6.jpg'); }
/* Icon — refined gradient pill, top-left, subtle 3D feel */
.leis-icon {
width:48px; height:48px;
border-radius:10px;
background:linear-gradient(135deg, rgba(93,239,149,.18) 0%, rgba(63,180,195,.1) 100%);
border:1px solid rgba(93,239,149,.28);
display:flex; align-items:center; justify-content:center;
margin-bottom:1.25rem;
color:#5def95;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .4s cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .35s ease;
}
.leis-icon iconify-icon { font-size:24px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; }
.leis-card:hover .leis-icon {
transform:translateY(-2px) scale(1.04);
border-color:rgba(93,239,149,.65);
box-shadow:0 8px 22px rgba(93,239,149,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="light"] .leis-icon { background:rgba(77,206,175,.14); color:#2a9d8f; border-color:rgba(42,157,143,.3); }
/* Heading — lifts and brightens on hover */
.leis-card h3, .leis-card h4 {
font-family:var(--f-head);
font-size:1.1rem; font-weight:700;
letter-spacing:-.015em;
margin:0 0 .55rem;
color:var(--text);
transition:color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.leis-card:hover h3, .leis-card:hover h4 {
color:#f8f8e0;
transform:translateY(-1px);
}
/* Body */
.leis-card p {
font-size:.95rem;
color:var(--muted);
line-height:1.7;
margin:0;
transition:color .4s ease;
}
.leis-card:hover p { color:rgba(248,248,224,.92); }
/* ════════════════════════════════════════════════════════════════
RELATED SERVICES — internal-linking grid at the foot of every service page
════════════════════════════════════════════════════════════════ */
.related-services { padding-top:3.5rem; padding-bottom:4rem; border-top:1px solid var(--b); margin-top:3rem; }
.related-services .lbl { color:var(--accent); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:.7rem; font-weight:600; }
.related-services .ttl { font-family:var(--f-head); font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:600; margin-bottom:2rem; line-height:1.15; letter-spacing:-.01em; max-width:32ch; }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:1rem; }
.rel-card {
position:relative; display:flex; flex-direction:column;
min-height:230px;
background:var(--bg-card);
border:1px solid var(--b);
border-radius:14px;
padding:1.5rem 1.5rem 1.4rem;
text-decoration:none; color:inherit;
overflow:hidden;
isolation:isolate;
transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .35s ease;
}
.rel-card::before {
content:""; position:absolute; inset:0;
background:radial-gradient(120% 80% at 100% 0%, rgba(77,206,175,.10), transparent 55%);
opacity:0; transition:opacity .4s ease;
pointer-events:none; z-index:0;
}
.rel-card > * { position:relative; z-index:1; }
.rel-card:hover {
transform:translateY(-4px);
border-color:rgba(77,206,175,.45);
box-shadow:0 18px 40px -22px rgba(0,0,0,.45), 0 0 0 1px rgba(77,206,175,.08) inset;
}
.rel-card:hover::before { opacity:1; }
.rel-card-ico {
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:11px;
background:linear-gradient(135deg, rgba(77,206,175,.14) 0%, rgba(77,206,175,.06) 100%);
border:1px solid rgba(77,206,175,.18);
color:var(--teal);
margin-bottom:1.1rem;
transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease;
}
.rel-card-ico iconify-icon { font-size:20px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.rel-card:hover .rel-card-ico {
transform:scale(1.06) rotate(-3deg);
background:linear-gradient(135deg, rgba(77,206,175,.22) 0%, rgba(77,206,175,.10) 100%);
border-color:rgba(77,206,175,.35);
}
.rel-card-cat {
font-family:var(--f-mono); font-size:.62rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase;
color:var(--muted); opacity:.65;
margin-bottom:.45rem;
}
.rel-card h3 {
font-family:var(--f-head); font-size:1.15rem; font-weight:700;
margin:0 0 .5rem; line-height:1.2;
letter-spacing:-.005em;
transition:color .3s ease;
}
.rel-card:hover h3 { color:var(--teal); }
.rel-card p {
font-size:.88rem; color:var(--muted);
line-height:1.55; margin:0 0 1.4rem;
flex:1;
}
.rel-card-cta {
display:inline-flex; align-items:center; gap:.6rem;
font-family:var(--f-mono); font-size:.7rem;
letter-spacing:.16em; text-transform:uppercase;
color:var(--teal); font-weight:600;
margin-top:auto;
}
.rel-card-cta-line {
display:inline-block; width:18px; height:1px;
background:currentColor; opacity:.55;
transition:width .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.rel-card:hover .rel-card-cta-line { width:30px; opacity:1; }
.rel-card-cta iconify-icon {
font-size:14px; width:14px; height:14px;
display:inline-flex; align-items:center; justify-content:center;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.rel-card:hover .rel-card-cta iconify-icon { transform:translate(2px,-2px); }
.rel-card:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
[data-theme="light"] .related-services { border-top-color:rgba(0,0,0,.08); }
[data-theme="light"] .rel-card { background:var(--bg-card); box-shadow:0 2px 10px var(--card-shadow); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .rel-card:hover { box-shadow:0 18px 40px -22px rgba(0,0,0,.18), 0 0 0 1px rgba(77,206,175,.12) inset; }
/* ════════════════════════════════════════════════════════════════
VORTEILE BOX
════════════════════════════════════════════════════════════════ */
.vorteile {
background:linear-gradient(135deg, rgba(89,231,155,.06) 0%, rgba(61,178,198,.06) 50%, rgba(38,132,233,.05) 100%);
border:1px solid var(--b2); border-radius:16px; padding:2.5rem 2.75rem; margin:3rem 0;
position:relative; overflow:hidden;
}
.vorteile::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #5def95 0%, #3fb4c3 50%, #2684e9 100%); }
.vorteile h3 { font-family:var(--f-head); font-size:clamp(1.55rem,2.4vw,2.1rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; margin-bottom:1.5rem; color:var(--text); display:flex; align-items:center; gap:12px; }
.vorteile h3::before { content:none; }
.v-list { display:flex; flex-direction:column; gap:1.1rem; }
.v-list li { display:flex; align-items:flex-start; gap:14px; font-size:1.05rem; color:var(--muted); line-height:1.65; padding:.5rem 0; border-bottom:1px solid rgba(93,239,149,.1); }
.v-list li:last-child { border-bottom:none; }
.v-list li::before { content:'✓'; width:24px; height:24px; border-radius:50%; background:#5def95; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; color:#0a1a14; font-weight:800; font-size:.85rem; line-height:1; box-shadow:0 0 10px rgba(93,239,149,.25); }
.v-list li strong { color:var(--text); font-weight:700; font-size:1.08rem; }
/* ════════════════════════════════════════════════════════════════
DEMO / PIX4D SECTION
════════════════════════════════════════════════════════════════ */
.demo-strip { background:var(--bg); border-top:1px solid var(--b); }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3rem; }
.demo-frame { border-radius:var(--r); overflow:hidden; border:1px solid var(--b); background:var(--bg-card); }
.demo-top { display:flex; align-items:center; gap:6px; padding:.75rem 1rem; background:var(--bg2); border-bottom:1px solid var(--b); }
.demo-dot { width:8px; height:8px; border-radius:50%; }
.demo-lbl { font-family:var(--f-mono); font-size:.78rem; color:var(--muted); margin-left:4px; }
.demo-blocked { height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; }
.demo-blocked p { font-size:.84rem; color:var(--muted); max-width:260px; line-height:1.6; }
.embed-frame { display:block; width:100%; height:320px; border:0; }
/* ════════════════════════════════════════════════════════════════
PROCESS STEPS
════════════════════════════════════════════════════════════════ */
.process-strip { background:var(--bg1); border-top:1px solid var(--b); border-bottom:1px solid var(--b); }
.proc-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:4rem; position:relative; }
.proc-line { position:absolute; top:28px; left:80px; right:80px; height:1px; background:linear-gradient(90deg, var(--teal), var(--cyan)); opacity:.18; pointer-events:none; }
.proc-step { padding:0 1.5rem; }
.ps-dot { width:56px; height:56px; border-radius:50%; border:1.5px solid var(--b2); background:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.82rem; font-weight:700; color:var(--teal); margin-bottom:1.5rem; position:relative; z-index:1; transition:background var(--t), border-color var(--t), box-shadow var(--t); }
.proc-step:hover .ps-dot { background:rgba(77,206,175,.08); border-color:var(--teal); box-shadow:0 0 0 8px rgba(77,206,175,.06); }
.ps-title { font-family:var(--f-head); font-size:.95rem; font-weight:700; margin-bottom:.5rem; }
.ps-desc { font-size:.8rem; color:var(--muted); line-height:1.65; }
.ps-time { display:inline-block; margin-top:.75rem; font-size:.78rem; font-family:var(--f-mono); color:var(--teal); background:rgba(77,206,175,.07); border:1px solid var(--b); padding:.2rem .65rem; border-radius:999px; }
/* ════════════════════════════════════════════════════════════════
ABOUT
════════════════════════════════════════════════════════════════ */
.about-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:5rem; align-items:start; }
.cert-list { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.cert { display:inline-flex; align-items:center; gap:7px; background:var(--bg-card); border:1px solid var(--b); border-radius:var(--r-sm); padding:.5rem .9rem; font-size:.9rem; color:var(--muted); transition:border-color var(--t), color var(--t); }
.cert:hover { border-color:var(--b2); color:var(--text); }
.cert-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); flex-shrink:0; }
.partner-row { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.partner-badge { background:var(--bg-card); border:1px solid var(--b); border-radius:var(--r-sm); padding:.6rem 1.25rem; font-family:var(--f-mono); font-size:.82rem; color:var(--muted); transition:border-color var(--t), color var(--t); }
.partner-badge:hover { border-color:var(--b2); color:var(--text); }
.about-nums { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.a-num { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.25rem; text-align:center; }
.a-num .v { font-family:var(--f-mono); font-size:1.5rem; font-weight:600; color:#5def95; letter-spacing:-.01em; }
.a-num .l { font-size:.85rem; color:var(--muted); margin-top:4px; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; background:var(--bg-card); border:1px solid var(--b); border-radius:var(--r); padding:1.25rem; margin-bottom:.85rem; transition:border-color var(--t); }
.contact-item:hover { border-color:var(--b2); }
.ci-icon { width:40px; height:40px; border-radius:10px; background:rgba(77,206,175,.08); border:1px solid var(--b); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ci-icon iconify-icon { width:1em; height:1em; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }
.ci-l { font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:2px; }
.ci-v { font-size:.88rem; line-height:1.4; }
/* ════════════════════════════════════════════════════════════════
REFERENCES
════════════════════════════════════════════════════════════════ */
.ref-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.5rem; }
.ref-card { background:var(--bg-card); border:1px solid var(--b); border-radius:var(--r); overflow:hidden; transition:border-color var(--t-slow), transform var(--t-slow), box-shadow var(--t-slow); cursor:pointer; }
.ref-card:hover { border-color:var(--b2); transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,0,0,.35); }
.ref-thumb { height:210px; position:relative; overflow:hidden; }
.ref-thumb .img-ph { height:100%; border-radius:0; border:0; }
.ref-type { position:absolute; top:12px; left:12px; background:rgba(250,249,246,.8); border:1px solid var(--b); border-radius:999px; padding:.2rem .7rem; font-size:.78rem; font-weight:600; color:var(--teal); backdrop-filter:blur(8px); text-transform:uppercase; letter-spacing:.08em; }
.ref-body { padding:1.5rem; }
.ref-body h3 { font-family:var(--f-head); font-size:1rem; font-weight:700; margin-bottom:.5rem; }
.ref-body p { font-size:.81rem; color:var(--muted); line-height:1.6; }
.ref-meta { display:flex; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--b); flex-wrap:wrap; }
.ref-meta span { font-family:var(--f-mono); font-size:.78rem; color:var(--dim); }
/* ════════════════════════════════════════════════════════════════
CONTACT FORM
════════════════════════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:start; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.fg label { font-size:.92rem; font-weight:500; color:var(--muted); }
.fg input, .fg textarea, .fg select {
background:var(--bg-card); border:1.5px solid var(--b); border-radius:12px;
padding:.8rem 1.1rem; color:var(--text); font-family:var(--f-body); font-size:16px;
outline:none; transition:border-color .15s, box-shadow .15s, background .15s; width:100%;
}
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--teal); background:rgba(77,206,175,.03); box-shadow:0 0 0 3px rgba(77,206,175,.12), 0 1px 2px rgba(0,0,0,.2); }
.fg input.err, .fg textarea.err { border-color:#f56565; }
.f-err-msg { font-size:.85rem; color:#fc8181; display:none; margin-top:.2rem; }
.f-err-msg.show { display:block; }
.fg textarea { resize:vertical; min-height:120px; }
.fg select { cursor:pointer; }
.gdpr-row { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1.25rem; }
.gdpr-row input { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--teal); }
.gdpr-row label { font-size:.92rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.hp { display:none !important; visibility:hidden !important; position:absolute !important; left:-9999px !important; }
.form-ok { background:rgba(77,206,175,.08); border:1px solid rgba(77,206,175,.25); border-radius:var(--r); padding:2rem; text-align:center; display:none; }
.form-ok-err { background:rgba(245,101,101,.08); border:1px solid rgba(245,101,101,.25); border-radius:var(--r); padding:1rem 1.25rem; font-size:.84rem; color:#fc8181; display:none; margin-top:.5rem; }
/* ════════════════════════════════════════════════════════════════
LEGAL PAGES
════════════════════════════════════════════════════════════════ */
.legal { max-width:780px; margin:0 auto; padding:4rem 2.5rem; }
.legal h1 { font-family:var(--f-head); font-size:2rem; font-weight:700; margin-bottom:2rem; }
.legal h2 { font-family:var(--f-head); font-size:1.15rem; font-weight:600; margin:2rem 0 .6rem; }
.legal p, .legal li { font-size:.88rem; color:var(--muted); margin-bottom:.7rem; line-height:1.7; }
.legal ul { padding-left:1.5rem; list-style:disc; }
.legal a { color:var(--teal); }
.warn-box { background:rgba(245,101,101,.07); border:1px solid rgba(245,101,101,.2); border-radius:var(--r-sm); padding:1rem; font-size:.8rem; color:#fc8181; margin-bottom:1.5rem; }
/* ════════════════════════════════════════════════════════════════
TECHNOLOGY PAGE
════════════════════════════════════════════════════════════════ */
.tech-table { width:100%; border-collapse:collapse; margin:2rem 0; border-radius:12px; overflow:hidden; }
.tech-table th { text-align:left; padding:1.1rem 1.25rem; background:var(--bg2); border:1px solid var(--b); font-family:var(--f-head); font-size:1rem; font-weight:700; color:var(--text); letter-spacing:.01em; }
.tech-table td { padding:1.05rem 1.25rem; border:1px solid var(--b); font-size:.98rem; color:var(--muted); line-height:1.55; }
.tech-table tr:hover td { background:rgba(93,239,149,.05); }
.tech-table .acc { font-family:var(--f-mono); font-size:1rem; color:var(--teal); font-weight:600; }
.tech-block { background:var(--bg-card); border:1px solid var(--b); border-radius:16px; padding:2.25rem; margin-bottom:1.5rem; }
.tech-block h3 { font-family:var(--f-head); font-size:1.2rem; font-weight:700; margin-bottom:.85rem; color:var(--text); }
.tech-block p { font-size:1.02rem; color:var(--muted); line-height:1.75; }
.soft-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.soft-pill { background:rgba(77,206,175,.10); border:1px solid rgba(77,206,175,.32); border-radius:var(--r-sm); padding:.4rem .9rem; font-size:.9rem; font-weight:500; font-family:var(--f-body); color:var(--text); letter-spacing:.005em; }
[data-theme="light"] .soft-pill { background:rgba(42,157,143,.08); border-color:rgba(42,157,143,.28); color:#0F3D3A; }
/* ─── VIDEO SHOWCASE (facade pattern — loads iframe only on click) ─── */
.vid-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; grid-auto-rows:200px; }
.vid-tile {
position:relative; overflow:hidden; cursor:pointer;
border:1px solid var(--b); border-radius:var(--r);
background:#0a0a0a; padding:0; margin:0; display:block; width:100%;
transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
.vid-tile--wide { grid-column:span 2; grid-row:span 2; }
.vid-tile img {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:brightness(.82) saturate(.9);
transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.vid-tile::after {
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
}
.vid-tile:hover { border-color:rgba(77,206,175,.55); transform:translateY(-3px); }
.vid-tile:hover img { transform:scale(1.06); filter:brightness(.95) saturate(1.05); }
.vid-play {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
display:flex; align-items:center; justify-content:center;
width:58px; height:58px; border-radius:50%;
background:rgba(77,206,175,.92); color:#0a0a0a;
backdrop-filter:blur(6px);
box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(77,206,175,.4);
transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
z-index:2;
}
.vid-tile:hover .vid-play { transform:translate(-50%,-50%) scale(1.12); box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 8px rgba(77,206,175,.15); }
.vid-play svg { margin-left:3px; }
.vid-play iconify-icon { margin-left:3px; width:1em; height:1em; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }
.vid-type {
position:absolute; top:.7rem; left:.7rem; z-index:2;
font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
padding:.3rem .55rem; border-radius:3px;
background:rgba(10,10,10,.7); border:1px solid rgba(77,206,175,.3);
color:var(--teal); backdrop-filter:blur(6px);
}
.vid-meta {
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:.85rem 1rem; text-align:left;
display:flex; flex-direction:column; gap:.15rem;
}
.vid-title { font-family:var(--f-head); font-size:.95rem; font-weight:700; line-height:1.25; color:#f8f8e0; letter-spacing:-.01em; }
.vid-sub { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.vid-tile--wide .vid-title { font-size:1.15rem; }
.vid-tile--wide .vid-play { width:72px; height:72px; }
.vid-tile--wide .vid-play svg { width:28px; height:28px; }
/* Ambient animated-webp preview — loops silently, no iframe, ~100KB */
.vid-loop {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity .6s ease;
filter:brightness(.82) saturate(.95);
z-index:1;
}
.vid-loop.is-ready { opacity:1; }
.vid-tile img:not(.vid-loop) { animation:kenBurns 22s ease-in-out infinite alternate; }
@keyframes kenBurns {
0% { transform:scale(1.02) translate(0, 0); }
100% { transform:scale(1.12) translate(-1.5%, -1%); }
}
.vid-tile:hover .vid-loop { filter:brightness(.95) saturate(1.05); }
/* Ambient YouTube iframe — muted autoplay loop, lazy-loaded only when in view */
.vid-ambient-frame {
position:absolute; inset:0; z-index:1; overflow:hidden;
opacity:0; transition:opacity 1s ease;
pointer-events:none;
}
.vid-ambient-frame.is-live { opacity:1; }
.vid-ambient-frame iframe {
position:absolute; top:50%; left:50%;
width:177.78vh; height:56.25vw; min-width:100%; min-height:100%;
transform:translate(-50%,-50%);
border:0; pointer-events:none;
filter:brightness(.82) saturate(.95);
}
.vid-ambient .vid-play { z-index:3; }
.vid-ambient .vid-type, .vid-ambient .vid-meta { z-index:3; }
.vid-ambient::after { z-index:2; }
.vid-tile--premium { position:relative; }
.vid-tile--premium::before {
content:""; position:absolute; inset:-2px; z-index:0; border-radius:inherit;
background:linear-gradient(135deg, rgba(77,206,175,.6), transparent 40%, rgba(77,206,175,.4));
opacity:.7; filter:blur(14px); pointer-events:none;
animation:premiumGlow 6s ease-in-out infinite;
}
@keyframes premiumGlow { 0%,100% { opacity:.4; } 50% { opacity:.8; } }
.vid-live-dot {
display:inline-block; width:7px; height:7px; border-radius:50%;
background:#ff3b3b; margin-right:.4rem; vertical-align:middle;
box-shadow:0 0 0 0 rgba(255,59,59,.7);
animation:liveDot 1.8s ease-in-out infinite;
}
@keyframes liveDot { 0%,100% { box-shadow:0 0 0 0 rgba(255,59,59,.7); } 50% { box-shadow:0 0 0 8px rgba(255,59,59,0); } }
@media (max-width:820px) {
.vid-grid { grid-template-columns:repeat(2, 1fr); grid-auto-rows:170px; }
.vid-tile--wide { grid-column:span 2; grid-row:span 1; }
}
@media (max-width:540px) {
.vid-grid { grid-template-columns:1fr; grid-auto-rows:200px; }
.vid-tile--wide { grid-column:span 1; }
}
/* ─── Video lightbox ─── */
.vid-lb { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:2rem; }
.vid-lb.is-open { display:flex; animation:vidLbIn .3s ease; }
@keyframes vidLbIn { from { opacity:0; } to { opacity:1; } }
.vid-lb-inner { position:relative; width:min(1100px, 100%); aspect-ratio:16/9; }
.vid-lb iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--r); }
.vid-lb-close {
position:absolute; top:-48px; right:0;
background:transparent; border:1px solid rgba(255,255,255,.25); color:#f8f8e0;
width:38px; height:38px; border-radius:50%; cursor:pointer;
font-size:1.1rem; display:flex; align-items:center; justify-content:center;
transition:border-color .25s, color .25s;
}
.vid-lb-close:hover { border-color:var(--teal); color:var(--teal); }
/* ─── Small play badge on ref-cards ─── */
.ref-card-play {
position:absolute; top:.75rem; right:.75rem; z-index:3;
width:36px; height:36px; border-radius:50%;
background:rgba(77,206,175,.92); color:#0a0a0a;
border:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,.45);
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.ref-card-play:hover { transform:scale(1.12); box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 0 6px rgba(77,206,175,.15); }
.ref-card-play svg { margin-left:2px; }
.ref-card-play iconify-icon { margin-left:2px; width:14px; height:14px; font-size:14px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
/* ════════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
MASSIVE TYPOGRAPHY CTA — Option 1 (Apple/Nothing style)
Single huge word "Bereit?" as the final call-to-action
═══════════════════════════════════════════════════════════ */
.cta-mega {
position:relative;
overflow:hidden;
background:var(--bg);
padding:clamp(5rem, 12vw, 9rem) clamp(1.5rem, 4vw, 3rem);
border-top:1px solid var(--bg3);
}
/* Ambient glow orb */
.cta-mega-glow {
position:absolute;
top:40%; left:50%;
width:65vw; height:65vh;
transform:translate(-50%, -50%);
border-radius:50%;
filter:blur(140px);
background:radial-gradient(circle, rgba(63,180,195,.13) 0%, rgba(93,239,149,.08) 40%, transparent 70%);
pointer-events:none;
z-index:0;
animation:ctaMegaGlow 8s ease-in-out infinite;
}
@keyframes ctaMegaGlow {
0%, 100% { opacity:.7; transform:translate(-50%, -50%) scale(1); }
50% { opacity:1; transform:translate(-50%, -50%) scale(1.08); }
}
.cta-mega-inner {
position:relative; z-index:2;
max-width:1200px;
margin:0 auto;
text-align:center;
}
/* Eyebrow label */
.cta-mega-lbl {
display:inline-flex; align-items:center; gap:.6rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.72rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color:rgba(93,239,149,.85);
padding:.5rem 1.1rem;
border-radius:999px;
background:rgba(93,239,149,.08);
border:1px solid rgba(93,239,149,.25);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
margin-bottom:clamp(1.5rem, 3vw, 2.25rem);
}
.cta-mega-lbl-dot {
width:6px; height:6px; border-radius:50%;
background:#5def95;
box-shadow:0 0 8px #5def95, 0 0 0 3px rgba(93,239,149,.2);
animation:ctaMegaDot 1.8s ease-in-out infinite;
}
@keyframes ctaMegaDot {
0%,100% { transform:scale(1); opacity:1; }
50% { transform:scale(1.4); opacity:.6; }
}
/* THE MASSIVE WORD */
.cta-mega-word {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(7rem, 22vw, 20rem);
font-weight:900;
line-height:.85;
letter-spacing:-.06em;
margin:0;
background:linear-gradient(180deg,
rgba(248,248,224,.96) 0%,
rgba(93,239,149,.85) 45%,
rgba(93,239,149,.75) 72%,
rgba(38,132,233,.55) 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 10px 60px rgba(93,239,149,.25));
text-wrap:balance;
user-select:none;
}
/* Sub-text */
.cta-mega-sub {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:clamp(1rem, 1.4vw, 1.25rem);
line-height:1.6;
color:rgba(248,248,224,.7);
max-width:520px;
margin:clamp(1.5rem, 3vw, 2.25rem) auto clamp(2rem, 4vw, 2.75rem);
}
.cta-mega-sub em {
font-style:normal; font-weight:700;
background:linear-gradient(135deg, #5def95, #3fb4c3);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* Actions */
.cta-mega-actions {
display:flex; align-items:center; justify-content:center;
gap:clamp(1rem, 2vw, 2rem);
flex-wrap:wrap;
}
.cta-mega-btn {
min-height:56px;
padding:.95rem 1.85rem !important;
font-size:.95rem !important;
}
.cta-mega-mail {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.85rem; font-weight:500;
color:rgba(248,248,224,.65);
letter-spacing:.04em;
border-bottom:1px solid rgba(248,248,224,.2);
padding-bottom:2px;
text-decoration:none;
transition:color .25s, border-color .25s;
}
.cta-mega-mail:hover {
color:#5def95;
border-bottom-color:rgba(93,239,149,.6);
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
.cta-mega-glow, .cta-mega-lbl-dot { animation:none; }
}
/* Light theme */
[data-theme="light"] .cta-mega { background:var(--bg); border-top-color:var(--bg3); }
/* ── LIGHT THEME: How-It-Works Cinema text adjustments ── */
[data-theme="light"] .how-cinema { background:var(--bg); }
[data-theme="light"] .how-cinema-sticky { background:var(--bg); }
[data-theme="light"] .how-cinema-ttl { color:#1a1a1e; }
[data-theme="light"] .how-cinema-ttl .accent { color:#2a9d8f; -webkit-text-fill-color:#2a9d8f; }
[data-theme="light"] .how-cinema-skip {
border-color:rgba(26,26,30,.22);
color:rgba(26,26,30,.72);
background:rgba(255,255,255,.7);
}
[data-theme="light"] .how-cinema-skip:hover {
border-color:#2a9d8f;
color:#2a9d8f;
background:rgba(42,157,143,.08);
}
[data-theme="light"] .how-frame-title {
color:#1a1a1e;
background:none;
-webkit-text-fill-color:#1a1a1e;
filter:none;
}
[data-theme="light"] .how-frame-desc { color:rgba(26,26,30,.72); }
[data-theme="light"] .how-frame-feats li {
color:#1f7a6b;
border-color:rgba(42,157,143,.28);
background:rgba(42,157,143,.06);
}
[data-theme="light"] .how-frame-feats li + li::before { content:none; }
[data-theme="light"] .how-frame-feats li:hover {
color:#13574c;
border-color:rgba(42,157,143,.5);
background:rgba(42,157,143,.12);
}
/* Card shell — light */
[data-theme="light"] .how-frame {
background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(253,252,246,.88) 100%);
border-color:rgba(42,157,143,.28);
border-top-color:rgba(42,157,143,.42);
box-shadow:
0 30px 80px rgba(26,26,30,.12),
0 0 0 1px rgba(42,157,143,.06),
0 8px 32px rgba(42,157,143,.08),
inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .how-frame-chrome {
background:
linear-gradient(180deg, rgba(252,250,244,.9) 0%, rgba(255,255,255,.75) 100%),
radial-gradient(120% 180% at 0% 0%, rgba(42,157,143,.06), transparent 55%);
border-bottom:none;
}
[data-theme="light"] .how-frame-chrome::after { content:none; }
[data-theme="light"] .how-frame-chrome-step { color:#1a1a1e; }
[data-theme="light"] .how-frame-chrome-step .hfc-num {
background:linear-gradient(180deg, rgba(42,157,143,.14), rgba(31,122,107,.08));
border-color:rgba(42,157,143,.38);
color:#1f7a6b;
}
[data-theme="light"] .how-frame-chrome-step .hfc-sep {
background:linear-gradient(90deg, rgba(42,157,143,.55), rgba(42,157,143,.1));
}
[data-theme="light"] .how-frame-chrome-step .hfc-label { color:rgba(26,26,30,.72); }
[data-theme="light"] .how-frame-chrome-status {
color:#1f7a6b;
background:rgba(42,157,143,.09);
border-color:rgba(42,157,143,.3);
}
[data-theme="light"] .how-frame-chrome-status::before {
background:#2a9d8f;
box-shadow:0 0 10px rgba(42,157,143,.75), 0 0 2px rgba(42,157,143,.9);
}
[data-theme="light"] .how-frame-feats {
background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(248,246,240,.85) 100%);
border-top:none;
}
[data-theme="light"] .how-frame-stage { color:rgba(26,26,30,.55); }
[data-theme="light"] .how-frame-visual {
background:rgba(0,0,0,.04);
box-shadow:0 10px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}
[data-theme="light"] .how-frame-visual img { filter:none; }
[data-theme="light"] .how-cinema-glow { display:none; }
[data-theme="light"] .how-cinema-dots .how-dot { background:rgba(26,26,30,.2); }
[data-theme="light"] .how-cinema-dots .how-dot.active { background:#2a9d8f; }
/* ── LIGHT THEME: Live Demo (screen, chrome, tabs, footer) ── */
[data-theme="light"] .live-screen {
background:var(--bg);
border:1px solid rgba(26,26,30,.12);
border-top:1px solid rgba(42,157,143,.45);
box-shadow:
0 30px 80px rgba(26,26,30,.12),
0 0 0 1px rgba(26,26,30,.05),
0 0 90px rgba(42,157,143,.10),
inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="light"] .live-screen-glow {
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(42,157,143,.14) 0%, transparent 70%);
}
[data-theme="light"] .live-chrome {
background:var(--bg);
border-bottom:1px solid rgba(26,26,30,.08);
}
/* Live tabs — colors only, layout/size preserved from base rules */
[data-theme="light"] .live-tabs {
background:rgba(26,26,30,.04);
border:1px solid var(--b);
border-top:1px solid rgba(42,157,143,.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 18px rgba(26,26,30,.04),
0 2px 10px rgba(26,26,30,.06);
}
[data-theme="light"] .live-tabs::before {
background:var(--grad);
box-shadow:
0 2px 10px rgba(42,157,143,.35),
0 0 18px rgba(93,239,149,.25),
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -1px 0 rgba(0,0,0,.08);
}
[data-theme="light"] .live-tab { color:var(--muted); }
[data-theme="light"] .live-tab:hover { color:var(--text); }
[data-theme="light"] .live-tab.is-active {
color:var(--bg);
text-shadow:0 1px 0 rgba(255,255,255,.15);
}
[data-theme="light"] .live-status {
color:rgba(26,26,30,.7);
background:rgba(42,157,143,.08);
border:1px solid rgba(42,157,143,.28);
}
[data-theme="light"] .live-footer {
background:var(--bg);
border-top:1px solid rgba(26,26,30,.08);
}
[data-theme="light"] .live-metric-val {
background:linear-gradient(135deg, #2a9d8f 0%, #5def95 55%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="light"] .live-metric-lbl { color:rgba(26,26,30,.6); }
[data-theme="light"] .live-footer-pitch { color:rgba(26,26,30,.78); }
[data-theme="light"] .live-footer-pitch em {
background:linear-gradient(135deg, #22C65F 0%, #2a9d8f 60%, #1E6BD6 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
[data-theme="light"] .live-metric-sep { background:rgba(26,26,30,.14); }
[data-theme="light"] .live-fullscreen-btn {
color:#1a1a1e;
background:rgba(255,255,255,.8);
border:1px solid rgba(26,26,30,.14);
}
[data-theme="light"] .live-fullscreen-btn:hover {
background:rgba(42,157,143,.08);
border-color:rgba(42,157,143,.55);
color:#1a1a1e;
box-shadow:0 8px 20px rgba(26,26,30,.08), 0 0 20px rgba(42,157,143,.14);
}
/* Light theme — keep the CTA gradient bold (don't let the generic light override flatten it) */
[data-theme="light"] .live-fullscreen-btn--cta {
color:#0a1a14;
background:linear-gradient(135deg, #22C65F 0%, #2a9d8f 50%, #1E6BD6 100%);
border:1px solid rgba(255,255,255,.55);
box-shadow:
0 0 0 1px rgba(34,198,95,.45),
0 10px 28px rgba(42,157,143,.30),
0 0 36px rgba(34,198,95,.20),
inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="light"] .live-fullscreen-btn--cta:hover {
color:#0a1a14;
background:linear-gradient(135deg, #22C65F 0%, #2a9d8f 50%, #1E6BD6 100%);
border-color:rgba(255,255,255,.7);
box-shadow:
0 0 0 1px rgba(34,198,95,.65),
0 14px 36px rgba(42,157,143,.45),
0 0 56px rgba(34,198,95,.30),
inset 0 1px 0 rgba(255,255,255,.65);
}
[data-theme="light"] .live-blocked-icon {
background:linear-gradient(135deg, rgba(42,157,143,.10) 0%, rgba(93,239,149,.06) 100%);
border:1px solid rgba(42,157,143,.30);
color:#2a9d8f;
box-shadow:
0 0 0 4px rgba(255,255,255,.6),
0 0 32px rgba(42,157,143,.12),
inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="light"] .live-blocked-title { color:#1a1a1e; }
[data-theme="light"] .live-blocked-desc { color:rgba(26,26,30,.7); }
/* ── LIGHT THEME: USP Cinema (Why OCGT) — single cohesive palette ── */
[data-theme="light"] .usp-cinema { background:var(--bg); }
[data-theme="light"] .usp-sticky { background:transparent; }
[data-theme="light"] .usp-glow { display:none; }
[data-theme="light"] .usp-cinema-lbl { color:#2a9d8f; }
[data-theme="light"] .usp-cinema-lbl::before {
background:linear-gradient(90deg, #2a9d8f, #5def95);
}
[data-theme="light"] .usp-cinema-ttl { color:#1a1a1e; }
[data-theme="light"] .usp-cinema-ttl .accent {
color:#2a9d8f;
-webkit-text-fill-color:#2a9d8f;
}
[data-theme="light"] .usp-slide {
background:#ffffff;
border:1px solid rgba(26,26,30,.10);
box-shadow:0 4px 14px -6px rgba(26,26,30,.10), 0 1px 0 rgba(26,26,30,.03);
}
[data-theme="light"] .usp-slide::before {
background:linear-gradient(160deg, rgba(42,157,143,.55) 0%, rgba(93,239,149,.35) 45%, rgba(38,132,233,.20) 85%, transparent 100%);
}
[data-theme="light"] .usp-slide:hover {
border-color:rgba(42,157,143,.35);
box-shadow:0 16px 34px -14px rgba(26,26,30,.14), 0 0 28px rgba(42,157,143,.10);
}
[data-theme="light"] .usp-num {
background:linear-gradient(135deg, #2a9d8f 0%, #5def95 55%, #2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
opacity:.85;
}
[data-theme="light"] .usp-cinema-title { color:#1a1a1e; }
[data-theme="light"] .usp-cinema-desc { color:rgba(26,26,30,.70); }
[data-theme="light"] .usp-cinema-line {
background:linear-gradient(90deg, #2a9d8f, #5def95, #2684e9);
opacity:.7;
}
[data-theme="light"] .usp-cinema-pill {
color:#1f7a6b;
border-color:rgba(42,157,143,.28);
background:rgba(42,157,143,.06);
}
[data-theme="light"] .usp-dot { background:rgba(26,26,30,.18); }
[data-theme="light"] .usp-dot.active {
background:linear-gradient(135deg, #2a9d8f, #5def95);
box-shadow:0 0 10px rgba(42,157,143,.35);
}
[data-theme="light"] .usp-pbar { background:rgba(26,26,30,.08); }
/* ── LIGHT THEME: Eyebrow labels everywhere — dark teal to match .disc-header ── */
[data-theme="light"] .lbl { color:#0f5f50; font-weight:700; }
/* ── LIGHT THEME: CTA Mega closer ── */
[data-theme="light"] .cta-mega-lbl {
color:#1f7a6b;
background:rgba(42,157,143,.10);
border-color:rgba(42,157,143,.35);
}
[data-theme="light"] .cta-mega-word {
background:linear-gradient(180deg,
#1a1a1e 0%,
#1f7a6b 25%,
#2a9d8f 50%,
#5def95 75%,
#2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 14px 36px rgba(42,157,143,.28));
}
[data-theme="light"] .cta-mega-sub { color:rgba(26,26,30,.72); }
[data-theme="light"] .cta-mega-mail {
color:rgba(26,26,30,.75);
border-bottom-color:rgba(26,26,30,.25);
}
[data-theme="light"] .cta-mega-mail:hover {
color:#2a9d8f;
border-bottom-color:#2a9d8f;
}
/* ── LIGHT THEME: Trust Wall — title color tweak ── */
[data-theme="light"] .trust-wall-ttl { color:#5a5c64; }
[data-theme="light"] .trust-more-link { color:#1f7a6b; border-color:rgba(31,122,107,.35); }
[data-theme="light"] .trust-more-link:hover,
[data-theme="light"] .trust-more-link:focus-visible {
color:#ffffff; background:#1f7a6b; border-color:#1f7a6b;
}
/* ── RV "In the field" / "3DGS" section — header links ── */
.rv-link {
font-family:var(--f-mono);
font-size:.78rem;
letter-spacing:.08em;
text-transform:uppercase;
color:#5def95;
text-decoration:none;
white-space:nowrap;
transition:color .25s ease, transform .25s ease;
}
.rv-link:hover { color:#5def95; transform:translateX(2px); }
[data-theme="light"] .rv-link { color:#2a9d8f; }
[data-theme="light"] .rv-link:hover { color:#1f7a6b; }
/* ── LIGHT THEME: Video tile pills — keep contrast on dark thumbnails ── */
[data-theme="light"] .vid-type {
background:rgba(10,10,10,.75);
border:1px solid rgba(42,157,143,.45);
color:#5def95;
backdrop-filter:blur(6px);
}
[data-theme="light"] .vid-live-dot {
background:#ff3b3b;
}
[data-theme="light"] .cta-mega-word {
background:linear-gradient(180deg,
#1a1a1e 0%,
#1f7a6b 25%,
#2a9d8f 50%,
#5def95 75%,
#2684e9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
filter:drop-shadow(0 14px 36px rgba(42,157,143,.28));
}
[data-theme="light"] .cta-mega-sub { color:rgba(26,26,30,.62); }
[data-theme="light"] .cta-mega-mail { color:rgba(26,26,30,.65); border-bottom-color:rgba(0,0,0,.2); }
[data-theme="light"] .cta-mega-glow { display:none; }
/* Mobile */
@media (max-width:700px) {
.cta-mega { padding:clamp(3.5rem, 10vw, 5rem) 1.25rem; }
.cta-mega-word { font-size:clamp(5rem, 28vw, 9rem); }
.cta-mega-sub { font-size:1rem; }
.cta-mega-lbl { font-size:.62rem; padding:.4rem .85rem; }
.cta-mega-actions { flex-direction:column; gap:1rem; }
.cta-mega-btn { width:100%; justify-content:center; }
}
footer {
background:var(--bg);
border-top:1px solid var(--b);
padding:clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
position:relative;
overflow:hidden;
}
.foot-inner {
max-width:1320px;
margin:0 auto;
display:grid;
grid-template-columns:1.6fr 1fr 1fr 1fr;
gap:clamp(2rem, 3.5vw, 3.5rem);
margin-bottom:clamp(2.5rem, 4vw, 3.25rem);
align-items:start;
}
.foot-brand { max-width:360px; }
.foot-brand p {
font-size:.95rem;
color:var(--muted);
margin:.9rem 0 1rem;
line-height:1.7;
}
.foot-brand a[href^="mailto"] {
display:inline-block;
font-size:.9rem;
font-weight:600;
letter-spacing:.002em;
border-bottom:1px solid transparent;
transition:color .2s ease, border-color .2s ease;
}
.foot-brand a[href^="mailto"]:hover {
border-bottom-color:currentColor;
}
.foot-col h5 {
font-size:.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--ink);
margin:0 0 1.1rem;
padding-bottom:.65rem;
border-bottom:1px solid var(--b);
}
.foot-col a, .foot-col button {
display:block;
width:100%;
font-size:.9rem;
font-weight:500;
color:var(--muted);
background:none;
border:none;
text-align:left;
padding:.35rem 0;
cursor:pointer;
font-family:var(--f-body);
letter-spacing:.002em;
line-height:1.45;
transition:color .2s ease, transform .2s ease, padding-left .2s ease;
}
.foot-col a:hover, .foot-col button:hover {
color:var(--teal);
padding-left:4px;
}
.foot-social-row { display:flex; gap:.55rem; margin-top:1.25rem; }
.foot-social-pill {
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:12px;
border:1px solid var(--b); color:var(--muted);
background:rgba(255,255,255,.02);
transition:color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease;
}
.foot-social-pill:hover { transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(0,0,0,.2); }
.foot-social-pill svg { transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.foot-social-pill:hover svg { transform:scale(1.1); }
.foot-social-pill--li:hover { border-color:rgba(10,102,194,.55); background:rgba(10,102,194,.08); }
.foot-social-pill--yt:hover { border-color:rgba(255,0,0,.5); background:rgba(255,0,0,.08); }
.foot-bottom {
max-width:1320px;
margin:0 auto;
padding-top:1.75rem;
border-top:1px solid var(--b);
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:1rem 1.75rem;
}
.foot-bottom p {
font-size:.82rem;
color:var(--dim);
letter-spacing:.005em;
margin:0;
}
.foot-sec {
font-size:.72rem;
color:var(--dim);
font-family:var(--f-mono);
display:inline-flex;
align-items:center;
gap:6px;
letter-spacing:.04em;
}
.foot-reset {
font-size:.82rem;
color:var(--dim);
background:none;
border:none;
cursor:pointer;
font-family:var(--f-body);
padding:0;
transition:color .2s ease;
}
.foot-reset:hover { color:var(--teal); }
/* ════════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
.pillars { grid-template-columns:1fr; }
.how-pipeline { grid-template-columns:1fr; }
.how-arrow { display:none; }
.testi-grid { grid-template-columns:1fr; }
.about-grid { grid-template-columns:1fr; gap:2rem; }
.contact-grid { grid-template-columns:1fr; }
.svc-hero-inner { grid-template-columns:1fr; }
.cta-box { display:none; }
.proc-steps { grid-template-columns:1fr 1fr; }
.sec-tile { flex:0 0 300px; height:150px; }
.foot-inner { grid-template-columns:1fr 1fr; }
.demo-grid { grid-template-columns:1fr; }
.two-col { grid-template-columns:1fr; }
}
/* Collapse the desktop nav to hamburger at ≤1024px — below this the natural content width (~916px) can't fit a viewport minus padding without clipping the language toggle or the Kontakt CTA. */
@media (max-width:1024px) {
.nav-links { display:none; }
.lang { display:none; }
.menu-btn { display:flex; }
}
@media (max-width:768px) {
:root { --nav-h:72px; }
nav { top:10px; max-width:calc(100vw - 1.5rem); }
.sec, .sec-sm { padding:4.5rem 1.25rem; }
.hero { padding:calc(var(--nav-h) + 3.5rem) 1.25rem 4rem; }
.full-sec { padding:4.5rem 1.25rem; }
.wrap { padding:0 1.25rem; }
.nav-wrap { padding:0 1rem; }
.sb-card { padding:0 1.5rem; }
.sb-num { font-size:1rem; }
.sb-desc { font-size:.7rem; }
.sb-icon { width:32px; height:32px; border-radius:8px; }
.sb-icon svg { width:15px; height:15px; }
.sb-num { font-size:1rem; }
.sb-desc { font-size:.55rem; }
.usp-pbar { display:none; }
.three-col { grid-template-columns:1fr; }
.four-col { grid-template-columns:1fr 1fr; }
.proc-steps { grid-template-columns:1fr; }
.proc-line { display:none; }
.sec-tile { flex:0 0 280px; height:140px; }
.sec-tile p { max-height:80px; opacity:1; margin-top:.15rem; }
.foot-inner { grid-template-columns:1fr; gap:2rem; }
.foot-bottom { flex-direction:column; align-items:flex-start; }
.form-row { grid-template-columns:1fr; }
.leis-grid { grid-template-columns:1fr; }
.ref-grid { grid-template-columns:1fr; }
body { cursor:auto; }
#cur { display:none; }
.svc-hero { padding:3rem 1.25rem; }
.legal { padding:3rem 1.25rem; }
}
@media (max-width:480px) {
.four-col { grid-template-columns:1fr; }
}
/* ════════════════════════════════════════════════════════════════
GERMAN FLAG THEME — Schwarz-Rot-Gold dark glassmorphism
Vertical stripes: Black | Red | Gold — blurred & glassy
════════════════════════════════════════════════════════════════ */
/* Flag background element */
#de-flag {
position:fixed; inset:0; z-index:-1; pointer-events:none;
background: radial-gradient(ellipse at 20% 50%, #141818 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, #121220 0%, transparent 55%),
radial-gradient(ellipse at 60% 80%, #18161e 0%, transparent 50%),
linear-gradient(135deg, #0C0C0E 0%, #0E0E12 40%, #0C0C10 100%);
filter: none; transform: none; opacity: 1;
}
/* Grain: subtle on dark bg */
.grain { opacity:var(--grain-opacity, .022); }
/* Stats bar */
.stats-bar { background:transparent; }
/* Step number circles */
.step-n { color:#f8f8e0; }
/* Step visualisation boxes */
.step-vis { background:var(--bg2); border-color:rgba(77,206,175,.12); }
.step-vis::after { background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(77,206,175,.07), transparent 70%); }
/* Image placeholder cards: dark */
.img-ph { background:linear-gradient(135deg,#1e1e22 0%,#18181b 100%); border-color:rgba(77,206,175,.2); }
.img-ph::before { background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(77,206,175,.05) 0%, transparent 70%); }
/* Reference type pill */
.ref-type { background:rgba(19,19,21,.80); border-color:rgba(255,255,255,.12); color:#f8f8e0; }
/* Dropdown menus */
.drop { background:rgba(19,19,21,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 48px rgba(0,0,0,.6); }
/* Mobile menu */
.mob-menu { background:rgba(19,19,21,.96); border-color:rgba(77,206,175,.12); }
/* Cookie banner */
#cookie { background:rgba(19,19,21,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 64px rgba(0,0,0,.5); }
/* Demo frame chrome */
.demo-top { background:var(--bg2); border-color:rgba(77,206,175,.12); }
/* Active lang/cookie buttons */
.lang-b.act { color:var(--bg); }
.ck-yes { color:var(--bg); }
/* Announcement bar */
#announce { background:var(--bg1); border-color:rgba(77,206,175,.12); }
.an-pill { background:rgba(255,206,0,.12); border-color:rgba(255,206,0,.30); color:#FFCE00; }
.an-close { color:var(--dim); }
.an-close:hover { color:var(--text); }
/* Sub-nav — handled in component block below */
/* Floating CTA */
.cf-x { background:rgba(20,14,10,.92); }
/* Vorteile highlight box */
.vorteile { background:linear-gradient(135deg,rgba(89,231,155,.05) 0%,rgba(61,178,198,.05) 100%); border-color:rgba(77,206,175,.20); }
/* Tech table header */
.tech-table th { background:var(--bg2); color:var(--text); }
/* Form success */
.form-ok { background:rgba(77,206,175,.08); border-color:rgba(77,206,175,.25); }
/* Legal warning box */
.warn-box { background:rgba(245,101,101,.07); border-color:rgba(245,101,101,.2); color:#fc8181; }
/* Scrollbar */
::-webkit-scrollbar-track { background:var(--bg); }
/* ════════════════════════════════════════════════════════════════
THEME TOGGLE BUTTON
════════════════════════════════════════════════════════════════ */
.theme-tog { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--b); background:rgba(255,255,255,.04); cursor:pointer; transition:border-color var(--t), background var(--t); flex-shrink:0; margin-left:2px; }
.theme-tog:hover { border-color:var(--b2); background:rgba(255,255,255,.08); }
.theme-tog svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--t); }
.theme-tog:hover svg { stroke:var(--text); }
/* Show/hide sun vs moon */
.theme-tog .icon-sun { display:none; }
.theme-tog .icon-moon { display:block; }
[data-theme="light"] .theme-tog .icon-sun { display:block; }
[data-theme="light"] .theme-tog .icon-moon { display:none; }
[data-theme="light"] .theme-tog { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(248,248,224,.85); }
[data-theme="light"] .theme-tog:hover { background:rgba(255,255,255,.12); }
/* Hide desktop theme toggle when the full nav collapses to hamburger (the mobile menu has its own theme toggle) */
@media (max-width:1024px) { .theme-tog.desk { display:none; } }
/* ════════════════════════════════════════════════════════════════
LIGHT THEME — Component overrides
════════════════════════════════════════════════════════════════ */
/* Nav */
/* Light theme — use dim smoked-glass so the nav reads on BOTH the dark hero
and the cream page body. Same dark-glass architecture as the dark theme
but slightly softer; the nav text flips via separate color overrides. */
[data-theme="light"] nav {
background:
linear-gradient(180deg, rgba(20,22,28,.32) 0%, rgba(12,14,20,.44) 100%),
linear-gradient(135deg, rgba(42,157,143,.04) 0%, transparent 40%, rgba(93,239,149,.04) 100%);
border-color:rgba(255,255,255,.12);
border-top-color:rgba(255,255,255,.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(0,0,0,.18),
inset 0 0 0 1px rgba(255,255,255,.05);
}
[data-theme="light"] nav::before {
background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%);
mix-blend-mode:screen;
opacity:.9;
}
[data-theme="light"] nav:hover {
border-color:rgba(255,255,255,.18);
border-top-color:rgba(255,255,255,.32);
background:
linear-gradient(180deg, rgba(26,28,34,.42) 0%, rgba(14,16,22,.52) 100%),
linear-gradient(135deg, rgba(42,157,143,.06) 0%, transparent 40%, rgba(93,239,149,.06) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
inset 0 -1px 0 rgba(0,0,0,.22),
inset 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="light"] nav.nav-mini:hover {
box-shadow:
0 16px 48px rgba(12,14,20,.32),
0 1px 2px rgba(12,14,20,.24),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -1px 0 rgba(0,0,0,.24),
inset 0 0 0 1px rgba(255,255,255,.1);
background:
linear-gradient(180deg, rgba(28,30,38,.48) 0%, rgba(14,16,22,.58) 100%),
linear-gradient(135deg, rgba(42,157,143,.08) 0%, transparent 40%, rgba(93,239,149,.08) 100%);
}
[data-theme="light"] .nv-btn { color:rgba(248,248,224,.82); }
[data-theme="light"] .nv-btn:hover, [data-theme="light"] .nv-btn.act { color:#f8f8e0; }
[data-theme="light"] .nav-cta {
background:#5def95; /* matches .btn-p in dark; consistent across themes */
color:#0a1a14;
border:1px solid rgba(93,239,149,.38);
box-shadow:
0 0 0 1px rgba(93,239,149,.38),
0 6px 20px rgba(93,239,149,.22),
inset 0 1px 0 rgba(255,255,255,.32);
text-shadow:none;
}
[data-theme="light"] .nav-cta:hover {
background:#6FF5A6;
border-color:rgba(93,239,149,.5);
box-shadow:
0 0 0 1px rgba(93,239,149,.5),
0 10px 32px rgba(93,239,149,.35),
0 0 48px rgba(93,239,149,.18),
inset 0 1px 0 rgba(255,255,255,.4);
}
[data-theme="light"] .nav-sep { background:rgba(255,255,255,.14); }
[data-theme="light"] .lang { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
[data-theme="light"] .lang-b { color:rgba(248,248,224,.7); }
[data-theme="light"] .lang-b.act { color:#f8f8e0; }
/* Dropdowns */
[data-theme="light"] .drop { background:rgba(255,255,255,.95); box-shadow:0 16px 48px rgba(0,0,0,.12); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .drop-link { color:#3a3a40; }
[data-theme="light"] .drop-link:hover { background:var(--bg3); color:#1a1a1e; }
[data-theme="light"] .drop-desc { color:#787a84; }
/* Mobile menu */
[data-theme="light"] .mob-menu { background:rgba(245,243,240,.98); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .mob-lnk { color:#3a3a40; }
[data-theme="light"] .mob-grp { color:#1a1a1e; }
/* Mobile menu — language + theme buttons sit on the cream background, so the
nav-only cream-on-glass overrides don't apply here. */
[data-theme="light"] .mob-menu .lang-b { color:#5A5750; }
[data-theme="light"] .mob-menu .lang-b.act { color:#F4F1EA; }
[data-theme="light"] .mob-menu .theme-tog {
background:rgba(20,22,26,.04);
border-color:rgba(20,22,26,.12);
color:#5A5750;
}
[data-theme="light"] .mob-menu .theme-tog svg { stroke:#5A5750; }
[data-theme="light"] .mob-menu .theme-tog:hover { background:rgba(20,22,26,.08); border-color:rgba(20,22,26,.20); }
[data-theme="light"] .mob-menu .theme-tog:hover svg { stroke:#14161A; }
/* Primary CTA on cream — drop the white inset highlight that makes the pill
look glossy/washed against cream. Solid mint reads more like the nav-cta. */
[data-theme="light"] .btn-p {
box-shadow:
0 0 0 1px rgba(93,239,149,.45),
0 6px 20px rgba(93,239,149,.25);
}
[data-theme="light"] .btn-p:hover {
box-shadow:
0 0 0 1px rgba(93,239,149,.6),
0 10px 32px rgba(93,239,149,.38),
0 0 48px rgba(93,239,149,.22);
}
/* Align service hero content with the section body content. The body uses
padding-left:max(2.5rem, calc(50vw - 700px)) for a centered 1400px area;
apply the same to the hero so the H1 / breadcrumb line up with the
body text below. Applied to every page except home. */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7, #p-tech, #p-about, #p-refs, #p-contact, #p-impressum, #p-datenschutz) .svc-hero {
padding-left:max(2.5rem, calc(50vw - 700px));
padding-right:max(2.5rem, calc(50vw - 700px));
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7, #p-tech, #p-about, #p-refs, #p-contact, #p-impressum, #p-datenschutz) .svc-hero > div:last-child {
margin:0;
max-width:none;
width:100%;
padding-left:2.5rem !important;
padding-right:2.5rem !important;
box-sizing:border-box;
}
/* Mobile: relax the page-specific service-hero padding so content (H1, intro,
buttons) doesn't overflow on narrow viewports. The desktop rule above
forces 2.5rem (40px) on both the outer .svc-hero and the inner div,
which on a 375px viewport leaves only ~215px for content and clips
long German titles and CTA buttons via overflow:clip. */
@media (max-width:768px) {
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7, #p-tech, #p-about, #p-refs, #p-contact, #p-impressum, #p-datenschutz) .svc-hero {
padding-left:1.25rem;
padding-right:1.25rem;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7, #p-tech, #p-about, #p-refs, #p-contact, #p-impressum, #p-datenschutz) .svc-hero > div:last-child {
padding-left:0 !important;
padding-right:0 !important;
}
}
@media (max-width:480px) {
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7, #p-tech, #p-about, #p-refs, #p-contact, #p-impressum, #p-datenschutz) .svc-hero {
padding-left:1rem;
padding-right:1rem;
}
/* Tighten button padding so long CTA labels fit without clipping */
.svc-hero .btn-p,
.svc-hero .btn-o { padding:.95rem 1.25rem; font-size:.95rem; }
}
/* Hero overlays */
[data-theme="light"] .stats-bar { background:transparent; border-top:none; border-bottom:none; }
[data-theme="light"] .hero-stats-bar::before { background:linear-gradient(90deg, var(--bg), transparent); }
[data-theme="light"] .hero-stats-bar::after { background:linear-gradient(270deg, var(--bg), transparent); }
[data-theme="light"] .sb-num { color:var(--teal); }
[data-theme="light"] .sb-num span { color:var(--teal); }
[data-theme="light"] .sb-desc { color:var(--muted); }
/* Flag/canvas bg */
[data-theme="light"] #de-flag { background:var(--bg) !important; }
[data-theme="light"] .grain { display:none !important; }
/* Cards & sections */
[data-theme="light"] .how-card, [data-theme="light"] .ref-card,
[data-theme="light"] .leis-card { background:var(--bg-card); box-shadow:0 2px 12px var(--card-shadow); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .how-card:hover, [data-theme="light"] .ref-card:hover,
[data-theme="light"] .leis-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.1); border-color:rgba(42,157,143,.2); }
/* USP cinema light theme — consolidated above near live-demo block */
/* ──────────────────────────────────────────────────────────
Sector tiles — image-based cards, refined for light theme
Warm cream bg → tiles feel like printed editorial cards
────────────────────────────────────────────────────────── */
[data-theme="light"] .sec-tile {
border:1px solid rgba(26,26,30,.08);
box-shadow:
0 6px 14px rgba(26,26,30,.08),
0 1px 2px rgba(26,26,30,.04);
}
[data-theme="light"] .sec-tile:hover {
border-color:rgba(42,157,143,.38);
box-shadow:
0 26px 54px rgba(26,26,30,.18),
0 12px 24px rgba(26,26,30,.1),
0 0 36px rgba(42,157,143,.14),
0 0 0 1px rgba(42,157,143,.12);
}
/* Image: lift a touch of the heavy darkening so it reads warmer in daylight */
[data-theme="light"] .sec-tile-img { filter:brightness(.82) saturate(1.05) contrast(1.02); }
[data-theme="light"] .sec-tile:hover .sec-tile-img { filter:brightness(.9) saturate(1.15) contrast(1.04); }
/* Gradient overlay — warmer/lighter base so text stays legible without the inky black crush */
[data-theme="light"] .sec-tile::before {
background:linear-gradient(180deg,
transparent 0%,
rgba(18,22,28,.12) 28%,
rgba(14,60,58,.62) 62%,
rgba(10,40,40,.92) 100%);
}
[data-theme="light"] .sec-tile:hover::before {
background:linear-gradient(180deg,
transparent 0%,
rgba(18,22,28,.08) 22%,
rgba(14,60,58,.55) 55%,
rgba(10,40,40,.9) 100%);
}
/* Top accent — brand teal palette instead of mint→blue */
[data-theme="light"] .sec-tile::after {
background:linear-gradient(90deg, #1f7a6b 0%, #2a9d8f 40%, #5def95 75%, #2684e9 100%);
height:2px;
}
/* Icon pill — switch from dark glass to warm teal-tinted glass */
[data-theme="light"] .sec-tile .st-icon {
background:rgba(248,248,224,.14);
border:1px solid rgba(248,248,224,.28);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .sec-tile:hover .st-icon {
background:rgba(42,157,143,.22);
border-color:rgba(93,239,149,.55);
}
[data-theme="light"] .sec-tile .st-icon svg { color:#86f0b8; }
[data-theme="light"] .sec-tile:hover .st-icon svg { color:#b4ffd3; }
/* Heading + body copy stay cream — they sit on dark-teal gradient, must remain high-contrast */
[data-theme="light"] .sec-tile h3, [data-theme="light"] .sec-tile h4 { color:#f8f8e0; text-shadow:0 2px 14px rgba(10,30,30,.85); }
[data-theme="light"] .sec-tile p { color:rgba(248,248,224,.95); text-shadow:0 1px 12px rgba(10,30,30,.95), 0 0 28px rgba(10,30,30,.65); }
/* Section label + title outside the tiles (the "Zielbranchen" / "Wer arbeitet mit uns?" header) */
[data-theme="light"] .sec .lbl { color:#0f5f50; font-weight:700; }
[data-theme="light"] .sec .ttl { color:#1a1a1e; }
/* Scroll edge-fade hint — give the horizontal scroll a soft cream feather at the edges */
[data-theme="light"] .sector-scroll {
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
[data-theme="light"] .how-card-pill { background:rgba(42,157,143,.06); border-color:rgba(42,157,143,.15); color:var(--teal); }
[data-theme="light"] .ref-type { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08); color:#1a1a1e; }
/* Disciplines — light theme: lighter section background (panels keep their own color) */
[data-theme="light"] .disc-sec { background:var(--bg); }
[data-theme="light"] .disc-heading { color:#1a1a1e; }
[data-theme="light"] .disc-heading em { color:#2a9d8f; -webkit-text-fill-color:#2a9d8f; }
[data-theme="light"] .disc-header,
[data-theme="light"] .disc-header-icon { color:#1f7a6b; }
/* Trust section */
[data-theme="light"] .trust-sec { background:var(--bg2); }
[data-theme="light"] .trust-chip { background:var(--bg1); border-color:rgba(0,0,0,.06); box-shadow:0 2px 8px rgba(0,0,0,.05); }
[data-theme="light"] .trust-chip-name { color:#1a1a1e; }
[data-theme="light"] .trust-chip-role { color:#5a5c64; }
/* Showcase */
[data-theme="light"] .sc-overlay { background:linear-gradient(transparent, rgba(0,0,0,.7)); }
/* How section */
[data-theme="light"] .how-strip { background:var(--bg1); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .how-header .sub { color:var(--muted); }
/* USP strip */
[data-theme="light"] .usp-strip { background:var(--bg); }
/* Demo */
[data-theme="light"] .demo-strip { background:var(--bg1); }
[data-theme="light"] .demo-top { background:var(--bg2); border-color:rgba(0,0,0,.08); }
/* Testimonials — keep light section as-is, it already has light styles */
/* FAQ */
[data-theme="light"] .faq-q { border-color:rgba(0,0,0,.08); color:var(--text); }
[data-theme="light"] .faq-q:hover { background:var(--bg2); }
/* CTA section */
[data-theme="light"] .cta-sec { background:var(--bg2); }
/* Footer */
[data-theme="light"] footer { background:var(--bg); border-top:1px solid rgba(26,26,30,.10); }
[data-theme="light"] .foot-col h5 { border-bottom-color:rgba(26,26,30,.10); }
[data-theme="light"] .foot-bottom { border-top-color:rgba(26,26,30,.10); }
[data-theme="light"] .foot-social-pill { background:rgba(26,26,30,.03); }
[data-theme="light"] footer h5 { color:#1a1a1e; }
[data-theme="light"] footer button, [data-theme="light"] footer a { color:#5a5c64; }
[data-theme="light"] footer button:hover, [data-theme="light"] footer a:hover { color:var(--teal); }
/* Cookie banner */
[data-theme="light"] #cookie { background:rgba(255,255,255,.95); box-shadow:0 16px 64px rgba(0,0,0,.15); }
/* Sub-nav */
[data-theme="light"] .sub-nav { background:transparent !important; border:none !important; box-shadow:none !important; }
[data-theme="light"] .sub-nav::before { display:none !important; }
[data-theme="light"] .sub-nav-inner { background:linear-gradient(135deg, rgba(245,243,240,.65) 0%, rgba(237,233,228,.60) 50%, rgba(245,243,240,.65) 100%); border:1px solid rgba(0,0,0,.08); border-top:1px solid rgba(255,255,255,.7); box-shadow:0 8px 32px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.5); }
/* Light-theme sub-nav handled in the main .sub-nav rule block */
/* Service page hero */
[data-theme="light"] .svc-hero-body { color:#f8f8e0; }
/* Form */
[data-theme="light"] .form-field { background:var(--bg1); border-color:rgba(0,0,0,.1); color:var(--text); }
[data-theme="light"] .form-field:focus { border-color:var(--teal); }
[data-theme="light"] .form-label { color:var(--muted); }
/* Floating CTA */
[data-theme="light"] #consult-float { background:var(--bg1); box-shadow:0 8px 32px rgba(0,0,0,.12); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .cf-x { background:var(--bg2); color:var(--muted); }
/* Image placeholders */
[data-theme="light"] .img-ph { background:linear-gradient(135deg,var(--bg2) 0%,var(--bg1) 100%); border-color:rgba(0,0,0,.08); }
/* Tech table */
[data-theme="light"] .tech-table th { background:var(--bg2); }
[data-theme="light"] .tech-table td { border-color:rgba(0,0,0,.06); }
/* Vorteile box */
[data-theme="light"] .vorteile { background:linear-gradient(135deg,rgba(42,157,143,.05) 0%,rgba(46,154,178,.05) 100%); border-color:rgba(42,157,143,.15); }
/* Warn box */
[data-theme="light"] .warn-box { background:rgba(224,82,82,.06); border-color:rgba(224,82,82,.15); color:#c53030; }
/* ── THEME BUG FIXES — Missing light overrides ── */
/* Outline button — adapts to light mode (keeps dark styling inside hero for video contrast) */
[data-theme="light"] .btn-o {
color:var(--text);
background:linear-gradient(180deg, rgba(42,157,143,.08) 0%, rgba(93,239,149,.06) 100%);
border-color:rgba(42,157,143,.4);
text-shadow:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(42,157,143,.1),
0 2px 10px rgba(0,0,0,.08),
0 0 20px rgba(42,157,143,.08);
}
[data-theme="light"] .btn-o:hover {
border-color:rgba(42,157,143,.65);
background:linear-gradient(180deg, rgba(42,157,143,.14) 0%, rgba(93,239,149,.1) 100%);
color:var(--text);
}
/* Exception: keep dark styling when button sits on the dark hero (video/3D bg) */
[data-theme="light"] .hero-x .btn-o,
[data-theme="light"] .hero-frame .btn-o,
[data-theme="light"] .svc-hero .btn-o,
[data-theme="light"] .cta-hero .btn-o {
color:#f8f8e0;
background:linear-gradient(180deg, rgba(93,239,149,.08) 0%, rgba(38,132,233,.06) 100%);
border-color:rgba(93,239,149,.45);
text-shadow:0 1px 3px rgba(0,0,0,.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(93,239,149,.15),
0 4px 20px rgba(0,0,0,.35),
0 0 30px rgba(93,239,149,.1);
}
/* Trust section text — hardcoded white */
[data-theme="light"] .trust-title { color:var(--text); }
[data-theme="light"] .trust-title span { color:var(--teal); }
[data-theme="light"] .trust-lbl { color:var(--teal); }
[data-theme="light"] .trust-chip-name { color:var(--text); }
[data-theme="light"] .trust-chip-role { color:var(--muted); }
[data-theme="light"] .trust-stat-v { color:var(--teal); }
[data-theme="light"] .trust-stat-l { color:var(--muted); }
/* Showcase titles — hardcoded white on overlay */
[data-theme="light"] .sc-overlay { background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75) 100%); }
/* Step numbers — white on gradient */
[data-theme="light"] .how-bubble { border-color:var(--yellow); background:rgba(196,132,58,.08); }
[data-theme="light"] .how-bubble-num { color:var(--yellow); }
/* Breadcrumbs — invisible on light */
[data-theme="light"] .breadcrumb { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .crumb { color:var(--muted); }
[data-theme="light"] .crumb:hover { color:var(--teal); }
/* Floating CTA text — hardcoded white */
[data-theme="light"] .cf-text p { color:var(--muted); }
[data-theme="light"] .cf-text strong { color:var(--text); }
/* Card hover shadows — too heavy on light backgrounds */
[data-theme="light"] .card:hover { box-shadow:0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08); }
[data-theme="light"] .svc-card:hover { box-shadow:0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08); }
[data-theme="light"] .how-card:hover { box-shadow:0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08); }
[data-theme="light"] .testi:hover { box-shadow:0 2px 6px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
/* Menu button — invisible hover on light */
[data-theme="light"] .menu-btn { color:rgba(248,248,224,.85); }
[data-theme="light"] .menu-btn:hover { background:rgba(255,255,255,.1); color:#f8f8e0; }
/* Marquee — edge fades need light bg */
[data-theme="light"] .trust-marquee::before { background:linear-gradient(90deg, var(--bg), transparent); }
[data-theme="light"] .trust-marquee::after { background:linear-gradient(270deg, var(--bg), transparent); }
/* CTA hero section overlay — hardcoded dark gradient */
[data-theme="light"] .cta-hero > div:nth-child(2) { background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.75) 100%) !important; }
/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); }
/* Smooth transition for theme switch */
html[data-theme] * { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
/* Exclude heavy-animation elements from theme transition */
html[data-theme] .trust-strip *, html[data-theme] canvas, html[data-theme] video,
html[data-theme] .how-card-img { transition: none; }
/* ════════════════════════════════════════════════════════════════
SCROLL EFFECTS — Progress bar, back-to-top, scroll indicator
════════════════════════════════════════════════════════════════ */
#scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:var(--grad); z-index:9999; pointer-events:none; opacity:0; transition:opacity .3s; }
#scroll-progress::after { content:''; position:absolute; right:0; top:-2px; width:50px; height:7px; background:inherit; filter:blur(4px); opacity:.7; }
#back-to-top { position:fixed; bottom:calc(7rem + env(safe-area-inset-bottom)); right:2rem; width:44px; height:44px; border-radius:50%; background:var(--bg2); border:1px solid var(--b); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(16px) scale(.9); transition:all .3s cubic-bezier(.34,1.56,.64,1); pointer-events:none; z-index:980; }
#back-to-top.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#back-to-top:hover { background:var(--bg3); color:var(--text); border-color:var(--b2); transform:translateY(-2px) scale(1.05); }
#back-to-top svg { width:18px; height:18px; }
@media(max-width:768px){ #back-to-top { bottom:calc(9rem + env(safe-area-inset-bottom)); right:1.25rem; } }
/* Reduced motion — disable everything */
@media(prefers-reduced-motion:reduce){
#scroll-progress { display:none !important; }
}
/* ════════════════════════════════════════════════════════════════
ANNOUNCEMENT BAR — Heliguy-inspired slim top banner
════════════════════════════════════════════════════════════════ */
#announce {
background:var(--bg1); border-bottom:1px solid var(--b);
padding:.45rem 3rem .45rem 2.5rem; display:none; align-items:center;
justify-content:center; gap:.75rem; font-size:.88rem; color:var(--muted);
position:fixed; top:0; left:0; right:0; z-index:1001; height:36px;
}
.an-pill { background:rgba(226,231,41,.12); border:1px solid rgba(226,231,41,.28); color:var(--yellow); border-radius:999px; padding:.12rem .6rem; font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; flex-shrink:0; }
.an-link { color:var(--teal); font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:3px; background:none; border:none; font-family:var(--f-body); font-size:.88rem; transition:opacity .2s; }
.an-link:hover { opacity:.75; }
.an-close { position:absolute; right:1.25rem; background:none; border:none; color:var(--dim); cursor:pointer; padding:2px 5px; font-size:1.05rem; line-height:1; transition:color .2s; }
.an-close:hover { color:var(--text); }
body.has-announce nav { top:50px; }
body.has-announce main { padding-top:calc(var(--nav-h) + 36px); }
body.has-announce .mob-menu { top:calc(var(--nav-h) + 36px); max-height:calc(100vh - var(--nav-h) - 46px); max-height:calc(100dvh - var(--nav-h) - 46px); }
/* .sub-nav is now static (in-flow) — no top offset needed for announce-bar state */
body.has-announce #cookie { bottom:1.5rem; }
/* ════════════════════════════════════════════════════════════════
FAQ ACCORDION — Heliguy-inspired expand/collapse
════════════════════════════════════════════════════════════════ */
.faq-section { margin-top:2.5rem; }
/* ─── FIX: section headings should not be clipped by the fixed nav on scroll ─── */
.lbl, .ttl, .disc-header, .disc-heading, .how-cinema-lbl, .how-cinema-ttl,
.cta-mega-lbl, .foot-mega-logo, .faq-section, .sec .lbl, .sec .ttl,
.showcase-strip, .testi-light, .disc-sec, .how-sec, .live-sec, .usp-cinema,
.cta-mega, footer, section, .sec {
scroll-margin-top:calc(var(--nav-h) + 24px);
}
html { scroll-padding-top:calc(var(--nav-h) + 16px); }
/* ═══════════════════════════════════════════════════════════
FAQ CATEGORY TABS — Option 1
Filter questions by category with sliding gradient indicator
═══════════════════════════════════════════════════════════ */
.faq-tabs {
display:inline-flex;
position:relative;
padding:4px;
margin-bottom:clamp(1.5rem, 3vw, 2rem);
background:rgba(8,12,18,.5);
border:1px solid rgba(248,248,224,.08);
border-top:1px solid rgba(93,239,149,.12);
border-radius:999px;
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.25);
flex-wrap:wrap;
gap:0;
}
.faq-tab {
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:.4rem;
padding:.5rem 1rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.68rem; font-weight:700;
color:rgba(248,248,224,.6);
letter-spacing:.12em; text-transform:uppercase;
background:transparent;
border:none; cursor:pointer;
border-radius:999px;
transition:color .35s ease, background .3s ease;
white-space:nowrap;
}
.faq-tab:hover { color:rgba(248,248,224,.92); }
.faq-tab.is-active {
color:#0a1a14;
background:linear-gradient(135deg, #5def95 0%, #3fb4c3 55%, #2684e9 100%);
box-shadow:
0 2px 10px rgba(93,239,149,.35),
0 0 18px rgba(93,239,149,.2),
inset 0 1px 0 rgba(255,255,255,.3);
text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.faq-tab-count {
display:inline-flex; align-items:center; justify-content:center;
min-width:18px; height:18px;
padding:0 .35rem;
border-radius:999px;
background:rgba(248,248,224,.1);
color:inherit;
font-size:.55rem; font-weight:700;
opacity:.7;
}
.faq-tab.is-active .faq-tab-count {
background:rgba(0,0,0,.2);
color:#0a1a14;
opacity:.9;
}
.faq-tab:focus-visible { outline:2px solid rgba(93,239,149,.6); outline-offset:3px; }
/* Hide filtered-out items */
.faq-item[data-cat]:not(.is-shown) {
display:none;
}
/* Smooth fade-in when filter changes */
.faq-item.is-shown { animation:faqFadeIn .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes faqFadeIn {
from { opacity:0; transform:translateY(8px); }
to { opacity:1; transform:translateY(0); }
}
/* Light theme */
[data-theme="light"] .faq-tabs {
background:rgba(246,247,243,.9);
border-color:rgba(0,0,0,.08);
border-top-color:rgba(42,157,143,.2);
}
[data-theme="light"] .faq-tab { color:rgba(26,26,30,.55); }
[data-theme="light"] .faq-tab:hover { color:rgba(26,26,30,.92); }
[data-theme="light"] .faq-tab-count { background:rgba(0,0,0,.08); color:rgba(26,26,30,.7); }
/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
.faq-item.is-shown { animation:none; }
.faq-tab, .faq-tab.is-active { transition:none; }
}
/* Mobile */
@media (max-width:600px) {
.faq-tabs { padding:3px; gap:0; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.faq-tab { padding:.45rem .75rem; font-size:.58rem; }
.faq-tab-count { display:none; }
}
.faq-item { border:1px solid var(--b); border-radius:var(--r); margin-bottom:.6rem; overflow:hidden; transition:border-color var(--t); }
.faq-item.open { border-color:var(--b2); }
.faq-q {
width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:1.15rem 1.5rem; background:var(--bg-card); border:none; color:var(--text);
font-family:var(--f-body); font-size:.9rem; font-weight:600; cursor:pointer; text-align:left;
transition:background var(--t), color var(--t);
}
.faq-q:hover { background:rgba(77,206,175,.04); color:var(--teal); }
.faq-item.open .faq-q { background:rgba(77,206,175,.06); color:var(--teal); }
.faq-icon {
width:24px; height:24px; border-radius:50%; border:1.5px solid var(--b2); flex-shrink:0;
display:flex; align-items:center; justify-content:center; color:var(--teal);
font-size:1.1rem; font-weight:300; line-height:1;
transition:transform .25s, border-color .2s, background .2s;
}
.faq-item.open .faq-icon { transform:rotate(45deg); border-color:var(--teal); background:rgba(77,206,175,.1); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .38s ease; }
.faq-a-inner { padding:0 1.5rem 1.25rem; font-size:.875rem; color:var(--muted); line-height:1.75; }
.faq-item.open .faq-a { max-height:400px; }
/* ════════════════════════════════════════════════════════════════
SUB-NAV PILLS — Heliguy-inspired page-level tab navigation
════════════════════════════════════════════════════════════════ */
/* Sub-nav — fixed at viewport top (below main nav), never scrolls with content.
Apple segmented-control inspired with sliding mint capsule. */
/* Sub-nav — static position, sits immediately below the hero in normal document flow.
Scrolls with the page (does NOT stick to viewport). No wide outer bar — just the pill.
CRITICAL: override the global `nav { translate:-50% 0 }` that centers the main nav —
without this override, .sub-nav inherits translate and renders off-screen left. */
.sub-nav {
position:relative;
display:flex; justify-content:center;
padding:1.25rem 1.5rem;
background:transparent; border:none;
box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
width:100%;
top:auto; left:auto; right:auto;
z-index:auto;
pointer-events:auto;
translate:none; /* ← override the global nav { translate:-50% } */
transform:none;
transition:none;
height:auto;
border-radius:0;
max-width:100%;
}
.sub-nav:hover { box-shadow:none; background:transparent; border:none; } /* neutralize global nav:hover */
.sub-nav-inner {
position:relative;
isolation:isolate;
display:inline-flex; align-items:center;
gap:0;
padding:4px;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scroll-padding-inline:.5rem;
/* Inky glass pill with green-tinted top stroke */
background:rgba(8,12,18,.55);
border:1px solid rgba(248,248,224,.08);
border-top:1px solid rgba(93,239,149,.14);
border-radius:999px;
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 4px 16px rgba(0,0,0,.3);
max-width:calc(100vw - 3rem);
pointer-events:auto;
/* Fade-edge mask ONLY applied when content actually overflows — avoids the "visible strip"
artifact where the pill's own edges appear faded when content fits naturally. */
}
.sub-nav-inner.is-overflowing {
mask-image:linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.sub-nav-inner::-webkit-scrollbar { display:none; }
/* Sliding capsule retired — each tab now self-styles via `.act`. */
.sub-nav-indicator { display:none !important; }
/* Tab = mono-caps pill, identical register to .faq-tab */
.sub-nav-lnk {
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:.4rem;
padding:.5rem .9rem;
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.66rem; font-weight:700;
color:rgba(248,248,224,.6);
letter-spacing:.11em;
text-transform:uppercase;
background:transparent;
border:none;
border-radius:999px;
cursor:pointer;
white-space:nowrap;
flex-shrink:0; /* never compress — scroll instead */
scroll-snap-align:center; /* each tab snaps neatly */
transition:color .3s ease, background .3s ease, transform .3s ease;
min-height:auto;
}
.sub-nav-lnk:hover { color:rgba(248,248,224,.92); }
.sub-nav-lnk.act {
color:#0a1a14;
/* Solid mint — matches the global OCGT-signature rule (gradient reserved for hero only) */
background:#5def95;
box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.sub-nav-lnk:focus-visible { outline:2px solid rgba(93,239,149,.6); outline-offset:3px; }
/* ═══════════════════════════════════════════════════════════════════
SUB-NAV CHEVRON SCROLL BUTTONS (Linear pattern)
- Only on devices with hover capability (desktop) — touch users swipe
- Only visible when the .sub-nav-inner actually overflows
- Positioned as absolute overlays on .sub-nav (outside scroll container so they don't scroll with it)
═══════════════════════════════════════════════════════════════════ */
.sub-nav-chev {
position:absolute;
top:50%; transform:translateY(-50%);
width:32px; height:32px;
display:none;
align-items:center; justify-content:center;
background:rgba(8,12,18,.75);
border:1px solid rgba(248,248,224,.12);
border-top:1px solid rgba(93,239,149,.22);
border-radius:50%;
color:rgba(248,248,224,.85);
cursor:pointer;
z-index:10;
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
box-shadow:0 4px 14px rgba(0,0,0,.35);
opacity:0;
transition:opacity .25s ease, background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
padding:0;
font-family: inherit;
}
.sub-nav-chev svg { width:14px; height:14px; pointer-events:none; }
.sub-nav-chev-left { left:calc(50% - 520px); } /* placed at ~pill left edge on desktop */
.sub-nav-chev-right { right:calc(50% - 520px); }
/* Show whenever the nav is scrollable — subtle idle opacity, brighten on hover */
.sub-nav-chev.is-shown {
display:flex;
opacity:.65;
pointer-events:auto;
}
.sub-nav:hover .sub-nav-chev.is-shown { opacity:1; }
@media (hover: hover) and (pointer: fine) {
.sub-nav-chev:hover {
background:rgba(93,239,149,.18);
color:#5def95;
transform:translateY(-50%) scale(1.08);
border-color:rgba(93,239,149,.45);
}
.sub-nav-chev:active { transform:translateY(-50%) scale(.94); }
}
/* On scroll extremes, dim the unavailable direction */
.sub-nav-chev.is-disabled { opacity:.18 !important; pointer-events:none; }
/* Light theme */
[data-theme="light"] .sub-nav-chev {
background:rgba(255,255,255,.85);
border:1px solid rgba(20,22,26,.1);
border-top:1px solid rgba(34,198,95,.3);
color:rgba(20,22,26,.7);
}
@media (hover: hover) and (pointer: fine) {
[data-theme="light"] .sub-nav-chev:hover {
background:rgba(34,198,95,.15);
color:#22C65F;
border-color:rgba(34,198,95,.5);
}
}
/* Touch-only devices (phones, most tablets): hide chevrons — swipe is natural */
@media (hover: none) and (pointer: coarse) {
.sub-nav-chev { display:none !important; }
}
/* Light theme — match faq-tabs light treatment */
[data-theme="light"] .sub-nav-inner {
background:rgba(255,255,255,.6);
border:1px solid rgba(0,0,0,.08);
border-top:1px solid rgba(34,198,95,.18);
}
[data-theme="light"] .sub-nav-lnk { color:rgba(20,22,26,.55); }
[data-theme="light"] .sub-nav-lnk:hover { color:rgba(20,22,26,.9); }
[data-theme="light"] .sub-nav-lnk.act {
color:#f8f8e0;
background:#22C65F;
box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
text-shadow:0 1px 0 rgba(0,0,0,.15);
}
/* Tablet tightening — help fit 8-tab RC pages without horizontal scroll on 900px tablets */
@media (max-width:1100px) {
.sub-nav-lnk { padding:.48rem .75rem; font-size:.62rem; letter-spacing:.1em; }
}
/* Mobile — horizontal scroll with fade mask */
@media (max-width:768px) {
.sub-nav { padding:1rem 1rem; }
.sub-nav-inner {
padding:.3rem;
overflow-x:auto;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
max-width:calc(100vw - 1.5rem);
scroll-snap-type:x mandatory;
/* Fade the scroll edges so users see there's more content off-screen */
mask-image:linear-gradient(90deg, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
.sub-nav-inner::-webkit-scrollbar { display:none; }
.sub-nav-lnk {
font-size:.8rem;
padding:.5rem .95rem;
flex-shrink:0;
scroll-snap-align:center;
}
}
/* Light-theme parity — cream frosted glass, obscures scrolling content behind */
[data-theme="light"] .sub-nav-inner {
background:rgba(244,241,234,.82);
border:1px solid rgba(20,22,26,.1);
border-top:1px solid rgba(20,22,26,.18);
box-shadow:
0 8px 32px rgba(20,22,26,.12),
0 0 0 1px rgba(20,22,26,.03),
inset 0 1px 0 rgba(255,255,255,.9);
}
/* Old light-theme sub-nav overrides replaced by faq-tabs-matched block (above). */
/* ════════════════════════════════════════════════════════════════
FLOATING CONSULTATION CTA — bold, dominant sticky widget
════════════════════════════════════════════════════════════════ */
/* Hide floating CTA on home page — primary hero CTA already covers this need */
body:has(#p-home.on) #consult-float { display:none !important; }
#consult-float {
position:fixed; bottom:2rem; right:2rem; z-index:990;
background:rgba(19,19,21,.82);
border:1.5px solid rgba(255,255,255,.1);
border-radius:18px;
padding:1.1rem 1.4rem 1.1rem 1.2rem;
box-shadow:0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
display:flex; align-items:center; gap:1rem; cursor:pointer;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
max-width:280px; animation:cfSlideIn .6s .6s both;
}
@keyframes cfSlideIn {
from { opacity:0; transform:translateY(20px) scale(.95); }
to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cfPulse {
0%, 100% { box-shadow:0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05); }
50% { box-shadow:0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(93,239,149,.22), 0 0 40px rgba(93,239,149,.14); }
}
#consult-float { animation:cfSlideIn .6s .6s both, cfPulse 3s 2s ease-in-out infinite; }
#consult-float:hover {
transform:translateY(-4px) scale(1.03);
box-shadow:0 16px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(93,239,149,.32), 0 0 40px rgba(93,239,149,.18);
border-color:rgba(93,239,149,.42);
}
#consult-float:active { transform:translateY(-1px) scale(1); }
.cf-icon {
width:44px; height:44px; border-radius:14px;
background:linear-gradient(135deg, #4dceaf 0%, #5def95 100%);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
box-shadow:0 4px 16px rgba(93,239,149,.35);
transition:transform .3s ease;
}
#consult-float:hover .cf-icon { transform:scale(1.08) rotate(-3deg); }
.cf-text { display:flex; flex-direction:column; gap:3px; }
.cf-text p {
font-family:var(--f-head); font-size:.82rem; font-weight:700;
color:#f8f8e0; line-height:1.4; letter-spacing:-.01em;
}
.cf-text span {
font-size:.72rem; font-weight:600; color:var(--yellow);
display:flex; align-items:center; gap:5px;
transition:gap .25s ease;
}
#consult-float:hover .cf-text span { gap:8px; }
.cf-x {
position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
background:rgba(19,19,21,.95); border:1.5px solid rgba(255,255,255,.15);
display:flex; align-items:center; justify-content:center;
font-size:.65rem; color:var(--muted); cursor:pointer;
transition:color .2s, border-color .2s, background .2s, transform .2s;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.cf-x:hover { color:#f8f8e0; border-color:rgba(93,239,149,.5); background:rgba(93,239,149,.18); transform:scale(1.15); }
@media (max-width:768px) {
#consult-float {
bottom:1.25rem; right:1.25rem; left:1.25rem; max-width:none;
border-radius:16px; padding:1rem 1.2rem;
justify-content:center;
}
}
/* ════════════════════════════════════════════════════════════════
PROJECT SHOWCASE GALLERY
════════════════════════════════════════════════════════════════ */
.showcase-strip { padding:clamp(4rem, 8vw, 7rem) 2.5rem; border-bottom:1px solid var(--b); }
.showcase-strip .lbl, .showcase-strip .ttl { text-align:center; }
.showcase-strip .lbl { justify-content:center; }
/* ═══════════════════════════════════════════════════════════
PROJECT SHOWCASE — Bento Asymmetric Grid
═══════════════════════════════════════════════════════════ */
.showcase-grid {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:240px 240px 260px;
grid-template-areas:
"hero hero a"
"hero hero b"
"wide wide wide";
gap:1rem;
margin-top:2.5rem;
max-width:1200px;
margin-left:auto; margin-right:auto;
}
.showcase-item {
position:relative; overflow:hidden;
border-radius:20px;
border:1px solid rgba(248,248,224,.08);
cursor:pointer;
transition:transform .4s cubic-bezier(.22,1,.36,1),
border-color .3s cubic-bezier(.22,1,.36,1),
box-shadow .4s cubic-bezier(.22,1,.36,1);
background:rgba(8,10,14,.4);
}
.showcase-item--hero { grid-area:hero; }
.showcase-item--a { grid-area:a; }
.showcase-item--b { grid-area:b; }
.showcase-item--wide { grid-area:wide; }
/* Gradient border on hover via mask-composite */
.showcase-item::before {
content:''; position:absolute; inset:-1px;
border-radius:inherit;
padding:1px;
background:linear-gradient(135deg, rgba(93,239,149,.7) 0%, rgba(63,180,195,.55) 40%, rgba(38,132,233,.4) 80%, transparent 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0;
transition:opacity .4s cubic-bezier(.22,1,.36,1);
pointer-events:none;
z-index:4;
}
.showcase-item:hover {
transform:translateY(-4px);
border-color:rgba(248,248,224,.14);
box-shadow:0 18px 48px rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.3);
}
.showcase-item:hover::before { opacity:1; }
/* Image layer */
.showcase-item img, .showcase-item video {
width:100%; height:100%;
object-fit:cover; display:block;
position:absolute; inset:0;
transition:transform .7s cubic-bezier(.22,1,.36,1), filter .7s ease;
filter:brightness(.88) saturate(1.05);
}
.showcase-item:hover img,
.showcase-item:hover video {
transform:scale(1.06);
filter:brightness(.95) saturate(1.12);
}
/* Top-left metadata badges (year, location, etc.) */
.sc-meta-top {
position:absolute; top:1rem; left:1.25rem;
display:flex; gap:.45rem; align-items:center;
flex-wrap:wrap;
z-index:3;
}
.showcase-item--hero .sc-meta-top { top:1.5rem; left:2rem; }
.sc-badge {
display:inline-flex; align-items:center;
font-family:'JetBrains Mono', monospace;
font-size:.6rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
color:rgba(248,248,224,.88);
padding:.3rem .7rem;
border-radius:999px;
background:rgba(0,0,0,.45);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border:1px solid rgba(248,248,224,.1);
}
.sc-badge--hero {
background:linear-gradient(135deg, rgba(93,239,149,.22) 0%, rgba(38,132,233,.18) 100%);
color:#9ef5b8;
border-color:rgba(93,239,149,.32);
font-size:.62rem;
padding:.36rem .85rem;
}
/* Bottom content overlay */
.showcase-item .sc-overlay {
position:absolute; inset:0;
background:linear-gradient(180deg, transparent 0%, rgba(8,8,12,0) 35%, rgba(8,8,12,.78) 78%, rgba(8,8,12,.95) 100%);
display:flex; flex-direction:column; justify-content:flex-end;
padding:1.25rem 1.5rem;
z-index:2;
}
.showcase-item--hero .sc-overlay {
padding:2rem 2.5rem;
background:linear-gradient(180deg, transparent 0%, rgba(8,8,12,0) 30%, rgba(8,8,12,.82) 72%, rgba(8,8,12,.96) 100%);
}
.sc-tag {
font-family:'JetBrains Mono', 'Fira Code', monospace;
font-size:.62rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase;
color:rgba(93,239,149,.92);
margin-bottom:.55rem;
}
.showcase-item--hero .sc-tag {
font-size:.72rem;
margin-bottom:.75rem;
}
.sc-title {
font-family:'Source Sans 3', 'Myriad Pro', var(--f-head);
font-size:clamp(1rem, 1.35vw, 1.2rem);
font-weight:800; line-height:1.22;
color:#f8f8e0;
letter-spacing:-.015em;
margin:0;
text-wrap:balance;
text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.showcase-item--hero .sc-title {
font-size:clamp(1.55rem, 2.6vw, 2.2rem);
letter-spacing:-.025em;
line-height:1.1;
}
.sc-subtitle {
font-family:'DM Sans', 'Source Sans 3', system-ui, sans-serif;
font-size:.88rem; font-weight:400;
color:rgba(248,248,224,.72);
margin-top:.6rem; margin-bottom:0;
line-height:1.55;
max-width:520px;
opacity:0; transform:translateY(10px);
transition:opacity .4s cubic-bezier(.22,1,.36,1) .05s,
transform .4s cubic-bezier(.22,1,.36,1) .05s;
}
.showcase-item:hover .sc-subtitle { opacity:1; transform:translateY(0); }
.sc-cta {
display:inline-flex; align-items:center; gap:.5rem;
font-family:'JetBrains Mono', monospace;
font-size:.66rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:#5def95;
margin-top:.95rem;
padding:.45rem .9rem;
border-radius:999px;
border:1px solid rgba(93,239,149,.3);
background:rgba(93,239,149,.1);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
opacity:0; transform:translateY(10px);
transition:opacity .4s cubic-bezier(.22,1,.36,1) .12s,
transform .4s cubic-bezier(.22,1,.36,1) .12s,
background .25s, border-color .25s;
align-self:flex-start;
}
.showcase-item:hover .sc-cta { opacity:1; transform:translateY(0); }
.sc-cta svg { width:11px; height:11px; }
/* Focus ring for accessibility */
.showcase-item:focus-visible {
outline:2px solid #5def95;
outline-offset:3px;
}
/* Tablet — reduce to 2-column bento */
@media(max-width:900px) {
.showcase-grid {
grid-template-columns:1fr 1fr;
grid-template-rows:auto;
grid-template-areas:
"hero hero"
"a b"
"wide wide";
}
.showcase-item--hero { min-height:400px; }
.showcase-item--a, .showcase-item--b { min-height:260px; }
.showcase-item--wide { min-height:260px; }
}
/* Mobile — single column stack */
@media(max-width:600px) {
.showcase-grid {
grid-template-columns:1fr;
grid-template-areas:
"hero"
"a"
"b"
"wide";
gap:.85rem;
}
.showcase-item--hero { min-height:380px; }
.showcase-item--a, .showcase-item--b { min-height:240px; }
.showcase-item--wide { min-height:240px; }
.showcase-item--hero .sc-overlay { padding:1.25rem 1.5rem; }
.showcase-item--hero .sc-meta-top { top:1rem; left:1rem; gap:.35rem; }
.sc-meta-top { gap:.35rem; }
.sc-badge {
font-size:.55rem; padding:.25rem .6rem;
letter-spacing:.1em;
}
.sc-badge--hero { font-size:.56rem; padding:.28rem .65rem; }
/* Hide less critical badges on very narrow screens */
.showcase-item--hero .sc-badge:nth-child(3) { display:none; }
.showcase-item--wide .sc-badge:nth-child(3) { display:none; }
.showcase-item--hero .sc-title { font-size:clamp(1.3rem, 7vw, 1.8rem); }
.sc-subtitle { font-size:.82rem; }
/* Show subtitle/CTA by default on mobile (no hover) */
.sc-subtitle { opacity:1; transform:none; }
.sc-cta { opacity:1; transform:none; font-size:.62rem; padding:.4rem .8rem; }
/* Darken gradient further so text is always readable */
.showcase-item .sc-overlay {
background:linear-gradient(180deg, transparent 0%, rgba(8,8,12,.2) 25%, rgba(8,8,12,.85) 65%, rgba(8,8,12,.97) 100%);
}
}
/* Pillar card images */
.pillar-img {
width:100%; height:160px; object-fit:cover; border-radius:var(--r) var(--r) 0 0;
margin:-2rem -2rem 1.5rem -2rem; width:calc(100% + 4rem);
display:block;
}
/* Video showcase for B3 / RC pages */
.video-showcase {
display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
margin:2rem 0;
}
.video-card {
position:relative; border-radius:var(--r); overflow:hidden;
border:1px solid var(--b); background:var(--bg-card);
transition:border-color .3s, box-shadow .3s;
}
.video-card:hover { border-color:var(--b2); box-shadow:0 8px 32px rgba(0,0,0,.4); }
.video-card video {
width:100%; height:260px; object-fit:cover; display:block;
}
.video-card .vc-info {
padding:1rem 1.25rem;
}
.video-card .vc-tag {
font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--teal); margin-bottom:.3rem;
}
.video-card .vc-title {
font-family:var(--f-head); font-size:.9rem; font-weight:700; margin-bottom:.25rem;
}
.video-card .vc-desc {
font-size:.78rem; color:var(--muted); line-height:1.5;
}
@media(max-width:768px){
.video-showcase { grid-template-columns:1fr; }
.video-card video { height:200px; }
}
/* Image gallery grid for service pages */
.img-gallery {
display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
margin:2rem 0;
}
.img-gallery-item {
position:relative; border-radius:var(--r); overflow:hidden;
border:1px solid var(--b); height:220px;
transition:border-color .3s, transform .3s;
}
.img-gallery-item:hover { border-color:var(--b2); transform:translateY(-2px); }
.img-gallery-item img {
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .4s;
}
.img-gallery-item:hover img { transform:scale(1.06); }
.img-gallery-item .ig-label {
position:absolute; bottom:0; left:0; right:0;
padding:.75rem 1rem;
background:linear-gradient(transparent, rgba(19,19,21,.9));
font-size:.72rem; font-weight:600; color:rgba(255,255,255,.9);
}
.img-gallery.cols-2 { grid-template-columns:1fr 1fr; }
.img-gallery-item.ig-wide { grid-column:span 2; }
@media(max-width:768px){
.img-gallery { grid-template-columns:1fr 1fr; }
.img-gallery-item { height:180px; }
.img-gallery-item.ig-wide { grid-column:span 1; }
}
@media(max-width:480px){
.img-gallery { grid-template-columns:1fr; }
}
/* Team photo section */
.team-photo {
width:100%; border-radius:var(--r); overflow:hidden;
border:1px solid var(--b); margin:1.5rem 0;
position:relative;
}
.team-photo img { width:100%; height:auto; display:block; }
.team-photo .tp-caption {
position:absolute; bottom:0; left:0; right:0;
padding:1rem 1.5rem;
background:linear-gradient(transparent, rgba(19,19,21,.9));
font-size:.78rem; color:rgba(255,255,255,.85);
}
/* ════════════════════════════════════════════════════════════════
MOBILE HARDENING — Touch targets, iOS fixes, safe areas
════════════════════════════════════════════════════════════════ */
/* -- iOS input zoom prevention (CRITICAL) -- */
@media (max-width:768px) {
input, textarea, select { font-size:16px !important; }
}
/* -- Cookie banner mobile -- */
@media (max-width:600px) {
#cookie { width:calc(100vw - 1.5rem); padding:1.25rem; bottom:1rem; padding-bottom:calc(1.25rem + env(safe-area-inset-bottom)); }
.ck-inner { flex-direction:column; gap:1rem; }
.ck-btns { width:100%; }
.ck-yes, .ck-no { width:100%; min-height:46px; font-size:.88rem !important; display:flex; align-items:center; justify-content:center; }
}
/* -- Floating CTA safe area -- */
@media (max-width:768px) {
#consult-float { bottom:calc(1.25rem + env(safe-area-inset-bottom)); }
}
/* -- Announcement bar mobile text -- */
@media (max-width:480px) {
#announce { padding:.4rem 2.5rem .4rem 1rem; gap:.5rem; height:auto; min-height:36px; }
#announce .an-text { font-size:.7rem; }
.an-pill { font-size:.58rem; padding:.1rem .5rem; }
.an-link { font-size:.7rem; }
.an-close { right:.75rem; min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; }
}
/* -- Touch target minimum sizes -- */
@media (max-width:768px) {
.mob-lnk { min-height:44px; display:flex; align-items:center; }
.mob-grp { min-height:32px; display:flex; align-items:center; }
.faq-q { min-height:48px; }
.foot-col a, .foot-col button { min-height:40px; display:flex; align-items:center; }
.foot-reset { min-height:44px; display:flex; align-items:center; }
.gdpr-row input[type="checkbox"] { width:22px; height:22px; min-width:22px; }
}
/* -- Footer safe area & mobile spacing -- */
@media (max-width:768px) {
footer { padding:3rem 1.25rem 2rem; padding-bottom:calc(2rem + env(safe-area-inset-bottom)); }
.foot-col h5 { margin-bottom:.75rem; }
}
/* -- Stats bar mobile readability -- */
@media (max-width:480px) {
.sb-card { padding:0 1.25rem; }
.sb-num { font-size:.95rem; }
.sb-desc { font-size:.65rem; }
}
/* -- Reference-tag list (clickable project pills) on mobile: stack to a
readable list. Long German labels like "BV BLUBB · Abriss-/Aushubmassen
· Meyer Erdbau" wrap awkwardly inside pills, leaving uneven row heights
and cramped pill borders. Targets only button.tag (clickable references)
so the static span.tag pills used in service cards stay compact. -- */
@media (max-width:560px) {
/* References-page filter row: switch from wrapping (which stacked chips
like "HYDROGEOLOGY / EXPERT OPINIONS" to their own row) to a single
horizontal scroll. Cleaner and saves vertical space on a phone. */
#p-refs .refs-filter {
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:1rem;
margin-left:-1rem; margin-right:-1rem;
padding-left:1rem; padding-right:1rem;
}
#p-refs .refs-filter::-webkit-scrollbar { display:none; }
#p-refs .refs-filter-chip { flex-shrink:0; font-size:.62rem; padding:.5rem .85rem; }
/* Year group head: long titles like "2018 · 3D photogrammetry pipeline
launch" were squeezing the count badge until "1 project" wrapped to
"1 / project / t". Drop the count to its own row instead. */
#p-refs .refs-yrhead { flex-wrap:wrap; gap:.5rem .75rem; padding:.85rem 0; }
#p-refs .refs-yrhead-lbl { font-size:.95rem; line-height:1.3; flex:1 1 auto; min-width:0; }
#p-refs .refs-yrhead-icon { flex-shrink:0; }
#p-refs .refs-yrhead-count {
font-size:.68rem; white-space:nowrap;
margin-left:0;
order:3; flex-basis:100%;
color:var(--dim);
}
/* Use :has() to scope only to lists that contain clickable button.tag —
leaves span.tag chip lists (used inside service cards) unchanged. */
.tags:has(button.tag) { flex-direction:column; align-items:stretch; gap:.5rem !important; }
.tags:has(button.tag) > button.tag {
border-radius:10px;
padding:.7rem 1rem;
text-align:left;
font-size:.82rem;
line-height:1.4;
background:var(--bg-card);
color:var(--text);
position:relative;
padding-right:2rem;
}
.tags:has(button.tag) > button.tag::after {
content:'→';
position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
color:var(--teal); font-weight:700;
transition:transform .25s ease;
}
.tags:has(button.tag) > button.tag:hover::after,
.tags:has(button.tag) > button.tag:active::after { transform:translateY(-50%) translateX(3px); }
}
/* -- CTA buttons on mobile: keep label and trailing arrow on one line.
Long English labels like "Request technical consultation →" otherwise
wrap with the arrow on its own line. Tighten padding + font so the
button fits the standard mobile content width (~343px). -- */
@media (max-width:480px) {
.btn-p, .btn-o {
white-space:nowrap;
padding:.85rem 1.25rem;
font-size:.92rem;
text-overflow:ellipsis;
max-width:100%;
overflow:hidden;
}
}
/* -- Service hero mobile -- */
@media (max-width:480px) {
.svc-hero { padding:2.5rem 1rem; }
.svc-hero--media { min-height:340px; padding-bottom:2.5rem; }
.svc-hero h1 { font-size:clamp(1.6rem, 7vw, 2.2rem); }
.svc-intro { font-size:.88rem; }
/* Breadcrumb on mobile: drop the pill background — long titles like
"Multispectral Analysis & Environmental Monitoring" wrap to multiple
lines, and a fully-rounded pill looks broken when text wraps. Plain
inline text reads cleaner and saves vertical space. !important is
needed to beat [data-theme="light"] .svc-hero .breadcrumb. */
.svc-hero .breadcrumb,
.breadcrumb {
font-size:.65rem !important; padding:0 !important; margin-bottom:.85rem;
background:transparent !important; border:0 !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
border-radius:0 !important; gap:.35rem;
line-height:1.5;
}
/* Truncate the current-page label so it never wraps to a second line */
.breadcrumb > .de-only,
.breadcrumb > .en-only {
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
max-width:60vw;
}
.lbl { font-size:.62rem; }
}
/* -- Layperson "Einfach erklärt" explainer grids: collapse the inline 4- and
3-column step grids to 2 columns on mobile. Inline styles can only be
overridden with !important. Targets the explainer pattern used on B1–B7
and other service pages. -- */
@media (max-width:560px) {
div[style*="repeat(4,1fr)"][style*=".75rem"] { grid-template-columns:repeat(2,1fr) !important; }
div[style*="repeat(3,1fr)"][style*=".75rem"] { grid-template-columns:repeat(2,1fr) !important; }
/* Comparison cards (red "without" / green "with" two-column layout):
stack vertically on mobile so each side gets full width and the bullet
items don't wrap word-by-word. */
div[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:1.5rem"] {
grid-template-columns:1fr !important;
}
}
/* -- Video showcase grid: stack to single column on mobile so each tile gets
full width (the 2fr/1fr layout squashes the narrow tile until titles wrap
character-by-character). Also relax the fixed 200/260px row height so the
stacked tiles use a proper 16:9 aspect ratio. -- */
@media (max-width:640px) {
.vid-grid { grid-template-columns:1fr !important; grid-auto-rows:auto !important; }
.vid-tile, .vid-tile--wide { grid-column:span 1 !important; grid-row:span 1 !important; aspect-ratio:16/9; min-height:0; height:auto; }
.vid-title { font-size:1rem; }
.vid-tile--wide .vid-title { font-size:1.05rem; }
/* Standalone hero/premium video tiles: their inline min-height of
300–360px makes them tower over a 375px-wide phone (a true 16:9 tile
is only ~211px tall). Override to let aspect-ratio drive height. */
.vid-hero[style*="min-height"],
.vid-tile--premium[style*="min-height"] {
min-height:0 !important;
aspect-ratio:16/9;
}
/* Slightly relax the meta padding so titles + caption don't crowd the
play button on smaller tiles */
.vid-meta { padding:.7rem .85rem; }
.vid-type { font-size:.6rem; padding:.25rem .5rem; }
.vid-sub { font-size:.62rem; }
/* Inline style="font-size:1.15rem" on some hero titles overrides our
mobile size — force smaller so 2-line wraps stay compact */
.vid-title[style*="font-size"] { font-size:.95rem !important; }
/* The play button on premium tiles is set to 72px inline — shrink on
phones so it doesn't dominate a 343x193 tile */
.vid-tile--premium .vid-play[style*="width"],
.vid-hero .vid-play[style*="width"] {
width:54px !important; height:54px !important;
}
.vid-tile--premium .vid-play[style*="width"] iconify-icon,
.vid-hero .vid-play[style*="width"] iconify-icon {
font-size:22px !important;
}
}
/* -- Tech comparison table on mobile: convert to stacked cards. The previous
horizontal-scroll fallback hid 2 of 4 columns behind a scroll bar — most
users never see "Typical Accuracy" or "Suited for". Each row becomes a
bordered card with labeled rows underneath the technology name. The label
text comes from the matching | via data-label attributes set by JS at
the bottom of this file. -- */
@media (max-width:640px) {
.tech-table { display:block; border:0; }
.tech-table thead { display:none; }
.tech-table tbody { display:block; }
.tech-table tr {
display:block;
background:var(--bg-card);
border:1px solid var(--b);
border-radius:12px;
padding:1rem 1.1rem;
margin-bottom:.85rem;
}
.tech-table tr:hover td { background:transparent; }
.tech-table td {
display:flex; gap:.75rem;
padding:.4rem 0;
border:0;
border-top:1px solid rgba(255,255,255,.06);
font-size:.85rem;
line-height:1.5;
}
/* First cell (technology name) becomes the card title — no label, bigger */
.tech-table td:first-child {
border-top:0; padding-top:0;
font-size:1rem; font-weight:700; color:var(--text);
margin-bottom:.25rem;
display:block;
}
/* Labels rendered from data-label attribute (JS-injected from | ) */
.tech-table td:not(:first-child)::before {
content:attr(data-label);
flex-shrink:0; width:36%;
font-family:var(--f-mono); font-size:.7rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase;
color:var(--dim);
}
.tech-table td.acc { color:var(--teal); font-weight:700; }
}
/* Wider mobile / tablet (640–768px): keep horizontal scroll fallback */
@media (min-width:641px) and (max-width:768px) {
.tech-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tech-table th, .tech-table td { white-space:nowrap; min-width:100px; }
.tech-table th:first-child, .tech-table td:first-child { position:sticky; left:0; background:var(--bg2); z-index:1; }
}
/* -- Cards & grids mobile spacing -- */
@media (max-width:480px) {
.svc-card { padding:1.25rem; }
.svc-card h3 { font-size:.95rem; }
.svc-card p { font-size:.82rem; }
.sec, .sec-sm { padding:3.5rem 1rem; }
.full-sec { padding:3.5rem 1rem; }
.legal { padding:2.5rem 1rem; }
.ttl { font-size:clamp(1.5rem, 6vw, 2rem); }
}
/* -- Image gallery 320px -- */
@media (max-width:360px) {
.img-gallery { grid-template-columns:1fr; }
.img-gallery-item { height:160px; }
}
/* -- Contact form mobile -- */
@media (max-width:480px) {
.fg label { font-size:.82rem; }
.fg input, .fg textarea, .fg select { padding:.75rem 1rem; }
.gdpr-row label { font-size:.82rem; }
.contact-grid { gap:1.5rem; }
}
/* Sub-nav mobile duplicate removed — handled in component block */
/* -- Showcase gallery 320px -- */
@media (max-width:360px) {
.showcase-grid { gap:1rem; }
.sc-item { height:200px; }
}
/* -- USP bento mobile (converted from scroll-pinned cinema; height:auto) -- */
@media (max-width:480px) {
.usp-cinema-ttl { font-size:clamp(1.15rem, 5vw, 1.6rem); }
.usp-num { font-size:clamp(3.5rem, 16vw, 5.5rem); }
.usp-cinema-title { font-size:clamp(1.5rem, 6.5vw, 2.2rem); }
.usp-cinema-desc { font-size:.92rem; max-width:90vw; }
.usp-cinema-pills { gap:.35rem; }
.usp-cinema-pill { font-size:.58rem; padding:.3rem .7rem; }
}
/* -- How-it-works mobile -- */
@media (max-width:480px) {
.how-card-img { height:180px; }
.how-card-body { padding:1rem; }
.how-card-title { font-size:.95rem; }
.how-card-desc { font-size:.78rem; }
.how-outputs { grid-template-columns:repeat(2, 1fr); }
}
/* -- Reference cards mobile -- */
@media (max-width:480px) {
.ref-card { padding:1rem; }
.ref-meta { font-size:.68rem; flex-wrap:wrap; }
}
/* -- Testimonials mobile -- */
@media (max-width:480px) {
.testi { padding:1.25rem; font-size:.82rem; }
}
/* -- FAQ mobile -- */
@media (max-width:480px) {
.faq-q { padding:.85rem 1rem; font-size:.88rem; }
.faq-a-inner { padding:.5rem 1rem 1rem; font-size:.84rem; }
}
/* -- Floating CTA close button tap target -- */
.cf-x { min-width:32px; min-height:32px; }
/* -- Global overflow containment -- */
@media (max-width:480px) {
.sec, .sec-sm, .full-sec, .wrap, .legal { overflow-x:hidden; }
.sub-nav { overflow:visible; }
.sub-nav-inner { max-width:calc(100vw - 2rem); overflow-x:auto; }
}
/* -- Service tiles overflow fix -- */
@media (max-width:360px) {
.leis-grid { grid-template-columns:1fr !important; }
}
/* -- Nav mobile small screens -- */
@media (max-width:360px) {
nav { max-width:calc(100vw - 1rem); top:8px; }
.nav-wrap { padding:0 .75rem; }
.logo-btn img { height:24px; }
.nav-cta { font-size:.75rem; padding:.4rem .8rem; }
}
/* -- About page mobile -- */
@media (max-width:480px) {
.about-grid { gap:1.5rem; }
}
/* -- Demo section mobile -- */
@media (max-width:480px) {
.demo-blocked { padding:2rem 1rem; }
.demo-blocked p { font-size:.82rem; max-width:100%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
SCROLL ANIMATIONS — TIER 1
Pure-CSS, GPU-accelerated, 60fps. Progressive enhancement:
browsers without view-timeline support get the static layout.
Disabled entirely under prefers-reduced-motion.
═══════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
/* S1 — Every .rv element now ALSO gets a scroll-linked fade-in.
Keeps the existing IntersectionObserver as a double-safety. */
@media (prefers-reduced-motion: no-preference) {
.rv:not(.vis) {
animation: rvScrollIn linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
@keyframes rvScrollIn {
from { opacity:0; transform:translateY(24px); }
to { opacity:1; transform:translateY(0); }
}
/* S4 — Subtle parallax drift on service-hero media + about-page hero images */
@media (prefers-reduced-motion: no-preference) {
.svc-hero--media .svc-hero-media img {
animation: heroParallax linear;
animation-timeline: view();
animation-range: entry 0% exit 100%;
will-change: transform;
}
}
@keyframes heroParallax {
from { transform: scale(1.08) translate3d(0, -2%, 0); }
to { transform: scale(1.14) translate3d(0, 2%, 0); }
}
/* S10 — Section headings scale + fade in as they enter viewport */
@media (prefers-reduced-motion: no-preference) {
.sec .ttl, .full-sec .ttl, .disc-heading, .sec-ttl {
animation: headlineRise linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
}
@keyframes headlineRise {
from { opacity:.35; transform: scale(.965) translateY(14px); letter-spacing:-.02em; }
to { opacity:1; transform: scale(1) translateY(0); letter-spacing:-.035em; }
}
/* S2 — Sticky caption band on long showcase (refs bento) — captions pin briefly */
@media (prefers-reduced-motion: no-preference) {
.refs-bento .ref-card .ref-body h3 {
animation: captionRise linear both;
animation-timeline: view();
animation-range: entry 10% cover 40%;
}
}
@keyframes captionRise {
from { opacity:0; transform: translateY(10px); }
to { opacity:1; transform: translateY(0); }
}
/* Section fade-mask at top/bottom edges — softens hard seams between sections.
IMPORTANT: use fixed pixels, not percentages. Tall sections (e.g. 6000+px on
mobile) with a 6% fade create a ~400px transparent zone that fades headings
near the section top into invisibility — looks like a blur bug. A small
fixed-pixel band keeps the seam softening without ever touching content. */
.sec, .full-sec, .usp-cinema {
mask-image: linear-gradient(180deg,
transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
-webkit-mask-image: linear-gradient(180deg,
transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
/* Don't fade-mask the first section (hero attaches) or sections with sticky content */
.hero-x, .sub-nav, .stats-bar, .usp-strip { mask-image: none; -webkit-mask-image: none; }
}
/* Fallback for non-supporting browsers: keep static layout via IntersectionObserver
(which is already in place) — nothing else needed. */
/* ════════════════════════════════════════════════════════════════
PREMIUM OVERRIDES — p-geotechnik + p-rc (audit-driven refinement pass)
Scope is strictly under :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) so other subpages stay intact.
──────────────────────────────────────────────────────────────
1 Tame the green — H1 off-white + hairline teal rule; icon tiles → teal
2 Proof-bar refresh — drop pill, hairline row, mono caps, tnum
3 Sticky sub-nav — thin bar, mono caps, animated indicator
4 geo-feat-card refine — top-right index, smaller naked icon, bigger title
5 svc-card redo — image strip, mono separators, animated CTA
6 Curated gallery — 2:1 + 1:1 + 1:1 + 2:1 mosaic
7 Floating CTA — charcoal+teal, scroll-triggered, page-aware
8 Type system — tnum + ss01, tighter H1, looser body
9 Section rhythm — alternating dark↔cream wash
10 Motion — staggered reveals, count-up numbers, micro-parallax
════════════════════════════════════════════════════════════════ */
/* ── 1 + 8 — Hero h1 (off-white, hairline teal underline, refined feature-settings) ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) {
font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-hero h1 {
color:#F4EFE6;
letter-spacing:-.045em;
text-shadow:0 1px 2px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.5);
position:relative;
text-wrap:balance;
hyphens:none;
word-break:normal;
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-hero h1 {
color:#F4EFE6;
text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 6px rgba(0,0,0,.4);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-hero--media h1::after {
height:1px; margin-top:1.4rem;
background:linear-gradient(90deg, rgba(77,206,175,0) 0%, #4dceaf 25%, #4dceaf 75%, rgba(77,206,175,0) 100%);
box-shadow:none;
animation:svcRuleDrawSlim 1s cubic-bezier(.22,1,.36,1) .6s forwards;
}
@keyframes svcRuleDrawSlim { from { width:0; opacity:0; } to { width:96px; opacity:1; } }
/* Body text loosened to 1.7 line-height for editorial feel */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-intro,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sec p { line-height:1.7; }
/* ── Redesigned "Einfach erklärt" callout card ── */
.explainer-card {
position:relative;
background:#FBF9F4;
border-radius:18px;
padding:2.75rem 2.5rem 2.25rem;
margin-bottom:2.5rem;
overflow:clip;
isolation:isolate;
}
[data-theme="dark"] .explainer-card { background:rgba(28,30,34,.85); }
.explainer-card::before {
content:none;
}
.explainer-card::after {
content:''; position:absolute; right:-120px; bottom:-120px;
width:300px; height:300px; pointer-events:none; z-index:0;
background:radial-gradient(circle at center, rgba(77,206,175,.10) 0%, transparent 65%);
}
[data-theme="dark"] .explainer-card::after { background:radial-gradient(circle at center, rgba(77,206,175,.12) 0%, transparent 65%); }
.explainer-card > * { position:relative; z-index:2; }
.explainer-card > .lbl {
font-family:var(--f-head);
font-size:.78rem;
letter-spacing:.14em;
color:#0f5f50 !important;
margin-bottom:.7rem !important;
text-transform:uppercase;
font-weight:800;
}
[data-theme="dark"] .explainer-card > .lbl { color:#4dceaf !important; }
.explainer-card > h2 {
font-family:var(--f-head) !important;
font-size:1.2rem !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:-.02em !important;
color:#14161A !important;
margin-bottom:1.25rem !important;
max-width:36ch;
}
[data-theme="dark"] .explainer-card > h2 { color:#F4EFE6 !important; }
.explainer-card > h2::before { content:none; }
.explainer-card .rc-explainer-text p { color:#3a3733; }
[data-theme="dark"] .explainer-card .rc-explainer-text p { color:rgba(244,239,230,.78); }
/* Reality Capture explainer — paragraph + brand specialty mark side-by-side */
.rc-explainer-row {
display:flex; gap:2.25rem; align-items:center;
margin-bottom:1.75rem;
flex-wrap:wrap;
}
.rc-explainer-text { flex:1 1 360px; min-width:0; }
.specialty-mark {
width:clamp(180px, 22vw, 280px);
aspect-ratio:339/135;
flex-shrink:0;
background-color:#4dceaf;
mask:url('/icons/specialty/tibbixel-dot-com-4954-svg.svg') center/contain no-repeat;
-webkit-mask:url('/icons/specialty/tibbixel-dot-com-4954-svg.svg') center/contain no-repeat;
opacity:.9;
transition:opacity .35s ease, transform .35s ease;
}
.specialty-mark:hover { opacity:1; transform:translateY(-1px); }
[data-theme="light"] .specialty-mark { background-color:#2a9d8f; opacity:.85; }
.crane-mark {
width:clamp(110px, 14vw, 160px);
aspect-ratio:1620/1920;
flex-shrink:0;
background-color:#4dceaf;
mask:url('/icons/specialty/construction-crane-silhouette-000000-original.svg') center/contain no-repeat;
-webkit-mask:url('/icons/specialty/construction-crane-silhouette-000000-original.svg') center/contain no-repeat;
opacity:.9;
transition:opacity .35s ease, transform .35s ease;
}
.crane-mark:hover { opacity:1; transform:translateY(-1px); }
[data-theme="light"] .crane-mark { background-color:#2a9d8f; opacity:.85; }
@media (max-width:768px){
.rc-explainer-row { gap:1.25rem; flex-direction:column; align-items:center; }
.rc-explainer-text { flex:1 1 auto; width:100%; }
.specialty-mark { width:200px; align-self:center; }
.crane-mark { width:120px; align-self:center; }
}
/* Uniform section spacing on Geotechnik / Reality Capture pages */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) > .sec {
padding-top:clamp(2.5rem, 4.5vw, 3.5rem);
padding-bottom:clamp(2.5rem, 4.5vw, 3.5rem);
margin-top:0;
max-width:none;
padding-left:max(2.5rem, calc(50vw - 700px));
padding-right:max(2.5rem, calc(50vw - 700px));
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) > .sec {
background:#F4F1EA;
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) > .related-services {
background:#F4F1EA;
}
/* Pull related-services closer to section above */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) > .related-services {
padding-top:clamp(.75rem, 2vw, 1.5rem);
padding-bottom:clamp(2.5rem, 4.5vw, 3.5rem);
margin-top:0;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) > .sec:has(+ .related-services) {
padding-bottom:clamp(.75rem, 2vw, 1.5rem);
}
/* Tight top padding for the explainer-card section so it visually balances with
its tight bottom (which abuts .related-services). */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) > .sec:has(.explainer-card) {
padding-top:clamp(.75rem, 2vw, 1.5rem);
}
/* ── 1 — Icon tiles: green → teal (champagne-cream surface, teal stroke) ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-icon {
background:linear-gradient(135deg, rgba(77,206,175,.14) 0%, rgba(77,206,175,.06) 100%) !important;
border:1px solid rgba(77,206,175,.28);
color:#4dceaf;
box-shadow:0 1px 2px rgba(20,22,26,.04), 0 4px 14px rgba(77,206,175,.10);
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-icon {
background:linear-gradient(135deg, rgba(77,206,175,.18) 0%, rgba(77,206,175,.08) 100%) !important;
border-color:rgba(77,206,175,.30);
color:#2a9d8f;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .three-col > div:hover .geo-icon,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card:hover .geo-icon {
transform:translateY(-1px) scale(1.04);
background:linear-gradient(135deg, rgba(77,206,175,.22) 0%, rgba(77,206,175,.10) 100%) !important;
border-color:rgba(77,206,175,.45);
box-shadow:0 2px 6px rgba(20,22,26,.05), 0 8px 24px rgba(77,206,175,.18);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card .icon {
background:linear-gradient(135deg, rgba(77,206,175,.14) 0%, rgba(77,206,175,.06) 100%) !important;
border:1px solid rgba(77,206,175,.22) !important;
color:#4dceaf;
box-shadow:0 1px 2px rgba(20,22,26,.04), 0 4px 14px rgba(77,206,175,.08);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card:hover .icon {
background:linear-gradient(135deg, rgba(77,206,175,.22) 0%, rgba(77,206,175,.10) 100%) !important;
border-color:rgba(77,206,175,.40) !important;
box-shadow:0 2px 6px rgba(20,22,26,.06), 0 8px 24px rgba(77,206,175,.20);
}
/* Stats bar — jade green numerals (brand accent) */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .stats-bar .sb-num,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .stats-bar .sb-num span {
color:#4dceaf;
font-feature-settings:"tnum" 1, "ss01" 1;
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .stats-bar .sb-num,
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .stats-bar .sb-num span {
color:#2a9d8f;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .stats-bar .sb-num span:first-child::before { content:none; }
/* ── 2 — Proof-bar: hairline row, no green pill, tabular numerals ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-hero-meta {
background:rgba(14,13,10,.32);
border:none;
border-top:1px solid rgba(244,239,230,.10);
border-bottom:1px solid rgba(244,239,230,.10);
border-radius:0;
padding:.85rem 0;
margin-top:1.25rem;
gap:1.6rem;
backdrop-filter:none; -webkit-backdrop-filter:none;
box-shadow:none;
font-family:var(--f-head);
font-size:.74rem; letter-spacing:.10em;
color:rgba(244,239,230,.78);
font-weight:600;
font-feature-settings:"tnum" 1, "ss01" 1;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-hero-meta strong {
font-family:var(--f-head);
color:#F4EFE6; font-weight:800;
letter-spacing:-.005em;
font-feature-settings:"tnum" 1, "ss01" 1;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-hero-meta .dot {
width:1px; height:10px; border-radius:0;
background:rgba(244,239,230,.20);
}
/* ── 3 — Sticky sub-nav: thin bar w/ mono caps tabs and underline indicator ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav {
position:sticky; top:0; z-index:60;
padding:0;
background:rgba(14,13,10,.92);
backdrop-filter:saturate(140%) blur(14px);
-webkit-backdrop-filter:saturate(140%) blur(14px);
border-top:1px solid rgba(244,239,230,.06);
border-bottom:1px solid rgba(244,239,230,.06);
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav {
background:rgba(244,241,234,.92) !important;
border-top:1px solid rgba(20,22,26,.07) !important;
border-bottom:1px solid rgba(20,22,26,.07) !important;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-inner {
background:transparent !important;
border:none !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 1.5rem !important;
max-width:1400px;
margin:0 auto;
gap:0 !important;
position:relative;
justify-content:flex-start !important;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk {
font-family:var(--f-mono);
font-size:.66rem; font-weight:600; letter-spacing:.18em;
text-transform:uppercase;
padding:1.1rem 1.25rem;
border-radius:0;
background:transparent !important;
border:none !important;
color:rgba(244,239,230,.55);
position:relative;
transition:color .25s ease;
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk { color:rgba(20,22,26,.55) !important; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk:hover { color:rgba(244,239,230,.92); background:transparent !important; }
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk:hover { color:rgba(20,22,26,.95) !important; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk.act {
color:#F4EFE6 !important;
background:transparent !important;
box-shadow:none !important;
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk.act { color:#14161A !important; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sub-nav-lnk.act::after {
content:''; position:absolute; left:1.25rem; right:1.25rem; bottom:0;
height:1px; background:#4dceaf;
box-shadow:0 0 8px rgba(77,206,175,.45);
}
/* ── 4 — geo-feat-card refinement: index top-right, smaller icon, bigger title ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card {
padding:1.85rem 1.6rem 1.5rem;
border-radius:14px;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-deco {
top:1.15rem; right:1.35rem;
font-family:var(--f-head); font-weight:700;
font-size:.78rem; letter-spacing:.06em;
-webkit-text-stroke:0;
color:rgba(244,239,230,.5);
opacity:1;
font-feature-settings:"tnum" 1;
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-deco {
color:rgba(20,22,26,.32);
-webkit-text-stroke:0;
opacity:1;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card:hover .geo-feat-deco {
color:#4dceaf;
transform:none;
opacity:1;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card .geo-icon {
width:34px; height:34px;
border-radius:9px;
margin:0 0 1.2rem 0 !important;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-card .geo-icon iconify-icon {
font-size:18px; width:18px; height:18px;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-title {
font-size:1.25rem; font-weight:600; letter-spacing:-.012em;
line-height:1.2;
margin-bottom:.6rem;
text-wrap:balance;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-desc {
font-size:.92rem; line-height:1.6;
margin-bottom:1.4rem;
}
/* ── 5 — svc-card redo: image strip on top, mono caps separators, animated CTA ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] {
padding:0;
display:flex; flex-direction:column;
border-radius:14px;
overflow:hidden;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] .svc-card-img {
position:relative !important;
inset:auto !important;
height:140px;
width:100%;
opacity:1 !important;
transform:none !important;
z-index:0;
flex-shrink:0;
overflow:hidden;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] .svc-card-img::before {
background:linear-gradient(180deg, rgba(14,13,10,0) 0%, rgba(14,13,10,.12) 60%, rgba(14,13,10,.45) 100%) !important;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] .svc-card-img img {
filter:saturate(1.05) brightness(.92) !important;
transform:scale(1.02);
transition:transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img]:hover .svc-card-img img {
transform:scale(1.06);
filter:saturate(1.12) brightness(1) !important;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .icon,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > h3,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > p,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .tags,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .arr {
margin-left:1.5rem; margin-right:1.5rem;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .icon { margin-top:1.4rem; margin-bottom:1rem; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > h3 { font-size:1.18rem; letter-spacing:-.012em; line-height:1.25; margin-bottom:.55rem; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > p {
font-size:.92rem; color:var(--muted); line-height:1.65;
margin-bottom:1rem;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .tags {
display:flex; flex-wrap:wrap; gap:0;
font-family:var(--f-head); font-size:.72rem; font-weight:600;
letter-spacing:.06em; text-transform:uppercase;
color:var(--muted); opacity:.92;
margin-bottom:1.4rem;
padding-bottom:1.4rem;
border-bottom:1px solid var(--b);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .tags .tag {
background:transparent !important;
border:none !important;
padding:0 !important;
border-radius:0 !important;
font-family:inherit !important;
font-size:inherit !important;
letter-spacing:inherit !important;
text-transform:inherit !important;
color:inherit !important;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .tags .tag:not(:last-child)::after {
content:'·'; margin:0 .55rem; opacity:.55;
}
/* CTA bar at bottom — animated line + arrow-up-right */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .arr {
position:relative !important; inset:auto !important;
width:auto; height:auto; border-radius:0; background:transparent;
border:none; opacity:1 !important; transform:none !important;
display:inline-flex; align-items:center; gap:.6rem;
font-family:var(--f-mono); font-size:.7rem; font-weight:600;
letter-spacing:.16em; text-transform:uppercase;
color:var(--teal);
margin-bottom:1.5rem;
font-size:0;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .arr::before {
content:'Mehr'; font-size:.7rem;
}
html[lang="en"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .arr::before { content:'Discover'; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img] > .arr::after {
content:'→'; font-size:.85rem;
display:inline-block; margin-left:.5rem;
transition:transform .35s cubic-bezier(.22,1,.36,1);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img]:hover > .arr::after {
transform:translate(3px,-1px);
}
/* Suppress green border-glow ring on these cards (looks too bold here) */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img]::after { display:none; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img]:hover h3 { color:var(--teal) !important; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img]:hover p { color:var(--muted) !important; }
/* Lift state — subtle */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .svc-card[data-img]:hover {
transform:translateY(-3px);
border-color:rgba(77,206,175,.35) !important;
box-shadow:0 18px 40px -22px rgba(0,0,0,.45), 0 0 0 1px rgba(77,206,175,.10) inset !important;
}
/* ── 6 — Curated gallery: 2:1 + 1:1 / 1:1 + 2:1 asymmetric mosaic ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery {
grid-template-columns:repeat(3, 1fr);
grid-auto-rows:240px;
gap:1rem;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(1) { grid-column:span 2; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(2) { grid-column:span 1; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(3) { grid-column:span 1; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(4) { grid-column:span 2; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item.ig-wide { grid-column:span 2; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item {
border-radius:14px;
height:auto !important;
min-height:240px;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(2),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(3) {
min-height:240px;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .ig-label {
font-family:'Fraunces', Georgia, serif;
font-style:italic; font-weight:400;
font-size:.92rem; letter-spacing:0;
background:linear-gradient(0deg, rgba(14,13,10,.92) 0%, rgba(14,13,10,.70) 60%, transparent 100%);
padding:1.2rem 1.1rem .85rem;
text-transform:none;
}
@media (max-width:820px) {
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery {
grid-template-columns:1fr 1fr;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(1),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(4),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item.ig-wide { grid-column:span 2; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(2),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item:nth-child(3) { grid-column:span 1; }
}
/* ── 7 — Floating CTA: charcoal+teal, scroll-triggered, hidden on contact/impressum ── */
#consult-float {
background:rgba(14,13,10,.92);
border:1px solid rgba(77,206,175,.20);
box-shadow:0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(77,206,175,.06);
opacity:0; pointer-events:none;
transform:translateY(16px) scale(.96);
transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
animation:none !important;
}
#consult-float.is-visible {
opacity:1; pointer-events:auto;
transform:translateY(0) scale(1);
}
#consult-float:hover {
border-color:rgba(77,206,175,.45);
box-shadow:0 16px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(77,206,175,.15), 0 0 40px rgba(77,206,175,.10);
transform:translateY(-3px) scale(1.02);
}
#consult-float .cf-icon {
background:linear-gradient(135deg, #4dceaf 0%, #5def95 100%);
box-shadow:0 4px 16px rgba(77,206,175,.30);
color:#0a1a14;
}
#consult-float .cf-icon svg { fill:#0a1a14; }
#consult-float .cf-text span {
color:#4dceaf;
}
#consult-float .cf-x:hover {
color:#F4EFE6; border-color:rgba(77,206,175,.45);
background:rgba(77,206,175,.18);
}
body:has(#p-contact.on) #consult-float,
body:has(#p-impressum.on) #consult-float,
body:has(#p-datenschutz.on) #consult-float {
display:none !important;
}
/* ── 9 — Section rhythm: subtle eyebrow + hairline rule above gallery
(clean editorial spacing, no dark frame that fights the cream theme) ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sec > .img-gallery {
margin-top:3.5rem;
padding-top:2.5rem;
border-top:1px solid var(--b);
position:relative;
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sec > .img-gallery::before {
content:'Impressions';
position:absolute; top:-.55rem; left:0;
background:var(--bg);
padding:0 .9rem 0 0;
font-family:var(--f-mono);
font-size:.66rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase;
color:var(--muted); opacity:.7;
}
html[lang="de"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sec > .img-gallery::before { content:'Impressionen'; }
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sec > .img-gallery {
border-top-color:rgba(20,22,26,.10);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item {
border:1px solid var(--b);
}
[data-theme="light"] :is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .img-gallery .img-gallery-item {
border-color:rgba(20,22,26,.06);
box-shadow:0 2px 12px rgba(20,22,26,.05);
}
@media (max-width:768px) {
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .sec > .img-gallery { margin-top:2.5rem; padding-top:2rem; }
}
/* ── 10 — Motion: stagger reveal for geo-feat-cards + count-up trigger styles ── */
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-grid .geo-feat-card,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .premium-stagger > * {
opacity:0;
transform:translateY(18px);
transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-grid .geo-feat-card:nth-child(1),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .premium-stagger > *:nth-child(1) { transition-delay:.0s; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-grid .geo-feat-card:nth-child(2),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .premium-stagger > *:nth-child(2) { transition-delay:.06s; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-grid .geo-feat-card:nth-child(3),
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .premium-stagger > *:nth-child(3) { transition-delay:.12s; }
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-grid.is-revealed .geo-feat-card,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .premium-stagger.is-revealed > * {
opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion:reduce) {
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .geo-feat-grid .geo-feat-card,
:is(#p-geotechnik, #p-rc, #p-a1, #p-a2, #p-a3, #p-a4, #p-b1, #p-b2, #p-b3, #p-b4, #p-b5, #p-b6, #p-b7) .premium-stagger > * {
opacity:1; transform:none; transition:none;
}
}
/* Hero media — micro parallax via cursor-follow handled in JS (covers ![]() + |