/* ============================================================ Flow State — Premium Dark Theme Black base · Cyan + Violet gradients · Glow + Glass ============================================================ */ :root{ --bg: #05070d; --bg-2: #08101c; --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.06); --border: rgba(255,255,255,.08); --text: #eaf2ff; --text-mute: #98a3b8; --cyan: #22e9ff; --cyan-2: #00b8ff; --violet: #a06bff; --violet-2: #6a3cff; --grad: linear-gradient(120deg,#22e9ff 0%,#7a6bff 55%,#c062ff 100%); --grad-soft: linear-gradient(120deg, rgba(34,233,255,.18), rgba(160,107,255,.18)); --shadow-1: 0 30px 60px -30px rgba(0,0,0,.7); --glow-cyan: 0 0 40px rgba(34,233,255,.35); --glow-violet:0 0 60px rgba(160,107,255,.35); --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --radius: 18px; --radius-l: 28px; --container: 1280px; --pad-x: clamp(20px, 4vw, 56px); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%; overflow-x:hidden; width:100%; -webkit-tap-highlight-color:transparent; touch-action:pan-y; /* Pinch-Zoom & horizontales Pannen unterbinden */ } body{ font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6; font-size:16px; /* `clip` (not `hidden`) so position:sticky on descendants still works. `hidden` here propagates to and turns it into a scroll container, which silently breaks the sticky-pinned sections (morph, risk-free, services, process). */ overflow-x:clip; width:100%; max-width:100vw; min-height:100dvh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul{list-style:none} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.05} h2{font-size:clamp(2rem, 4.5vw, 3.6rem)} h3{font-size:clamp(1.25rem, 2vw, 1.55rem);letter-spacing:-.01em;line-height:1.2} h4{font-size:1.1rem;letter-spacing:-.01em} p{color:var(--text-mute)} ::selection{background:rgba(34,233,255,.35);color:#fff} /* ===== Ambient Background ===== */ .ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .ambient .orb{ position:absolute;width:60vmax;height:60vmax;border-radius:50%; filter:blur(120px);opacity:.4;will-change:transform } .orb-cyan{background:radial-gradient(circle,rgba(34,233,255,.55),transparent 60%); top:-20vmax;left:-15vmax;animation:floaty 18s ease-in-out infinite alternate} .orb-violet{background:radial-gradient(circle,rgba(160,107,255,.55),transparent 60%); bottom:-25vmax;right:-15vmax;animation:floaty 22s ease-in-out infinite alternate-reverse} .grid{ position:absolute;inset:0;opacity:.35; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at center, #000 0%, transparent 75%); } @keyframes floaty{from{transform:translate3d(0,0,0)}to{transform:translate3d(8vmax,4vmax,0)}} /* ===== Layout helpers ===== */ main, .footer{position:relative;z-index:1} section{position:relative;padding:clamp(56px,7vw,100px) var(--pad-x);max-width:var(--container);margin:0 auto} .eyebrow{ display:inline-block;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase; color:var(--cyan);font-weight:600;margin-bottom:18px; padding:6px 14px;border:1px solid rgba(34,233,255,.3);border-radius:999px; background:rgba(34,233,255,.06); box-shadow:0 0 24px rgba(34,233,255,.12) inset; } .grad{ background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(122,107,255,.25)); } /* ===== Navigation ===== */ .nav{ position:fixed;top:18px;left:50%;transform:translateX(-50%); z-index:100;display:flex;align-items:center;gap:36px; padding:10px 12px 10px 18px; background:rgba(8,12,22,.55);backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--border);border-radius:999px; width:min(1200px, calc(100% - 32px)); transition:transform .35s ease, box-shadow .3s ease, background .3s ease; } .nav.scrolled{box-shadow:0 20px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(34,233,255,.08)} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;letter-spacing:.02em;font-size:1.1rem} .nav-logo img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(34,233,255,.45))} .nav-logo em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .nav-links{display:flex;gap:28px;margin-left:auto;font-size:.95rem;color:var(--text-mute)} .nav-links a{position:relative;padding:6px 2px;transition:color .25s} .nav-links a:hover{color:#fff} .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--grad); transition:width .3s ease } .nav-links a:hover::after{width:100%} .nav-cta{ padding:10px 20px;border-radius:999px; background:var(--grad);color:#06080f;font-weight:600;font-size:.92rem; box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 30px -10px rgba(122,107,255,.6); transition:transform .25s ease, box-shadow .25s ease, filter .25s } .nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset, 0 18px 40px -10px rgba(122,107,255,.8)} .nav-burger{display:none;flex-direction:column;gap:5px;padding:10px} .nav-burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s, opacity .3s} .nav-mobile-cta{display:none} .nav-backdrop{ position:fixed;inset:0;z-index:9; background:rgba(4,6,12,.55); backdrop-filter:blur(8px); opacity:0;pointer-events:none; transition:opacity .3s ease; } .nav.open ~ .nav-backdrop{opacity:1;pointer-events:auto} @media (max-width:880px){ .nav{gap:14px;padding:8px 8px 8px 14px} .nav-links{ position:fixed;top:calc(env(safe-area-inset-top, 0px) + 84px);left:14px;right:14px; flex-direction:column;align-items:stretch;gap:4px; padding:18px 18px 22px;border-radius:24px; background:rgba(8,12,22,.96);backdrop-filter:blur(24px); border:1px solid var(--border); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); transform:translateY(-8px) scale(.98);opacity:0;pointer-events:none; transition:opacity .28s ease, transform .28s ease; font-size:1.02rem; } .nav.open .nav-links{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .nav-links a:not(.nav-mobile-cta){ padding:14px 8px;min-height:44px; color:#fff; border-bottom:1px solid rgba(255,255,255,.06); } .nav-links a:not(.nav-mobile-cta):last-of-type{border-bottom:none} .nav-cta{display:none} .nav-mobile-cta{ display:flex;align-items:center;justify-content:center; margin-top:14px;padding:16px 22px;min-height:52px; background:var(--grad);color:#06080f;font-weight:700; border-radius:14px;text-align:center; box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 16px 36px -12px rgba(122,107,255,.6); } .nav-burger{display:flex;margin-left:auto} .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .nav-burger span:nth-child(2){opacity:0} .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ===== HERO · LineWaves WebGL background + 3D logo brand mark ===== */ .hero{ position:relative; min-height:100dvh; padding:0; max-width:none; margin:0; isolation:isolate; } .hero-sticky{ position:relative; min-height:100dvh; display:grid; grid-template-rows:1fr auto; place-items:center; padding:140px var(--pad-x) 80px; isolation:isolate; overflow:hidden; gap:18px; } /* WebGL backdrop fills the hero behind everything */ .hero-aurora, .line-waves-container{ position:absolute;inset:0; width:100%;height:100%; z-index:0; pointer-events:auto; } .hero-aurora canvas{ position:absolute;inset:0; width:100% !important;height:100% !important; display:block; } /* Title — centered, gradient lines that rise on load */ .hero-title{ position:relative;z-index:1; text-align:center; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem, 8vw, 6.4rem); line-height:.92; letter-spacing:-.045em; color:#fff; text-shadow:0 0 60px rgba(34,233,255,.12); width:100%; pointer-events:none; margin:0; } .hero-title .line{display:block;overflow:hidden} .hero-title .line>span{ display:inline-block; background:linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,.55) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; transform:translateY(110%); animation:rise 1.05s cubic-bezier(.2,.7,.1,1) forwards; } .hero-title .line:nth-child(2)>span{animation-delay:.12s} .hero-title .line:nth-child(3)>span{animation-delay:.22s} .hero-title .accent>span{ background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 30px rgba(122,107,255,.45)); } @keyframes rise{to{transform:translateY(0)}} /* Foot — tag + CTAs */ .hero-foot{ position:relative;z-index:3; display:flex;flex-direction:column;align-items:center;gap:30px; padding-bottom:30px; width:100%; } .hero-tag{ text-align:center;color:var(--text);font-size:clamp(1rem,1.4vw,1.2rem); max-width:680px;opacity:.88; } .hero-cta-row{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-bottom:0} @media (max-width:640px){ .hero-sticky{padding:120px 18px 70px} .hero-title{font-size:clamp(2.6rem,14vw,5rem)} } /* ===== Hero Stage · 3D F-logo showcase ===== */ .hero-stage{ position:relative; width:100%; aspect-ratio:1/1; max-width:720px; margin:0 auto; display:grid; place-items:center; isolation:isolate; /* Clip stage so pedestal glow + streaks don't bleed sideways into other columns */ overflow:hidden; } .hero-figure{ position:absolute; inset:0; width:100%; height:100%; /* Crop directly to the F glyph area — no extra scale → stays sharp */ object-fit:cover; object-position:82% 42%; z-index:3; --scroll-ry:0deg; /* Single drop-shadow → much cheaper than 2 stacked */ filter:drop-shadow(0 24px 80px rgba(122,107,255,.5)); animation:figureFloat 6s ease-in-out infinite; image-rendering:auto; } @keyframes figureFloat{ 0%,100%{ transform: translateY(0) rotateY(var(--scroll-ry, 0deg)); } 50% { transform: translateY(-8px) rotateY(var(--scroll-ry, 0deg)); } } /* ===== 3D PODIUM · proper cylindrical platform with depth ===== */ .hero-pedestal{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:78%; height:22%; z-index:2; pointer-events:none; } /* Main podium body — looks like a rounded "puck" with depth */ .hero-pedestal-disc{ position:absolute; top:20%; left:50%; width:96%; height:60%; transform:translateX(-50%); border-radius:50% / 32%; background: /* darker center suggests inner shadow */ radial-gradient(ellipse 90% 100% at 50% 30%, rgba(20,28,46,.98), rgba(8,12,22,.9) 50%, rgba(8,12,22,.5) 100%), linear-gradient(180deg, rgba(15,18,30,1), rgba(5,7,13,1)); border:1px solid rgba(34,233,255,.55); box-shadow: 0 14px 28px rgba(0,0,0,.55), inset 0 6px 14px rgba(0,0,0,.7), inset 0 -8px 14px rgba(34,233,255,.18), 0 0 0 1px rgba(34,233,255,.18); } /* Bright cyan-violet rim on TOP edge (where logo sits) — the "ring" of the podium */ .hero-pedestal-disc::before{ content:""; position:absolute; top:-3px; left:0; right:0; height:8px; border-radius:50% / 100%; background:linear-gradient(90deg, rgba(34,233,255,.1) 0%, rgba(34,233,255,1) 30%, rgba(160,107,255,1) 70%, rgba(34,233,255,.1) 100%); box-shadow: 0 0 16px rgba(34,233,255,.9), 0 0 32px rgba(34,233,255,.5), 0 0 48px rgba(160,107,255,.4); filter:blur(.5px); } /* Inner ring on top surface — soft cyan glow on the disc face */ .hero-pedestal-disc::after{ content:""; position:absolute; top:6%; left:8%; right:8%; height:18%; border-radius:50%; background:radial-gradient(ellipse 80% 50% at 50% 30%, rgba(34,233,255,.45) 0%, rgba(34,233,255,.18) 50%, transparent 80%); filter:blur(2px); } /* Bottom rim — softer light catching the lower edge */ .hero-pedestal-glow{ position:absolute; bottom:0; left:50%; width:100%; height:30%; transform:translateX(-50%); pointer-events:none; } .hero-pedestal-glow::before{ content:""; position:absolute; bottom:25%; left:0; right:0; height:4px; border-radius:50% / 100%; background:linear-gradient(90deg, transparent 0%, rgba(34,233,255,.7) 50%, transparent 100%); filter:blur(1.5px); } /* Floor reflection — soft cyan-violet glow under podium (constrained, won't bleed left) */ .hero-pedestal-glow::after{ content:""; position:absolute; bottom:-15%; left:5%; right:5%; height:140%; background:radial-gradient(ellipse 40% 50% at 50% 30%, rgba(34,233,255,.4) 0%, rgba(122,107,255,.2) 40%, transparent 75%); filter:blur(14px); } .hero-streaks{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(ellipse 60% 30% at 80% 75%, rgba(34,233,255,.35), transparent 60%), radial-gradient(ellipse 60% 30% at 90% 80%, rgba(160,107,255,.3), transparent 60%); filter:blur(24px); opacity:.9; } .hero-streaks::before, .hero-streaks::after{ content:""; position:absolute; bottom:18%; right:0; width:140%; height:2px; background:linear-gradient(90deg, transparent 0%, rgba(34,233,255,.7) 40%, rgba(160,107,255,.7) 70%, transparent 100%); filter:blur(2px); transform-origin:right center; } .hero-streaks::before{ transform:rotate(-12deg); opacity:.7; } .hero-streaks::after{ bottom:24%; transform:rotate(-18deg); opacity:.5; height:1px; } /* ===== Hero Trust Strip · 3 items, kompakt mit kurzen Labels ===== */ .hero-trust{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 1.6vw, 20px); align-items:center; max-width:100%; min-width:0; } .hero-trust-item{ display:flex; gap:12px; align-items:center; min-width:0; } .hero-trust-icon{ display:inline-flex; flex:none; width:42px; height:42px; border-radius:12px; background:linear-gradient(160deg, rgba(15,15,30,.9) 0%, rgba(20,20,38,.7) 100%); border:1px solid rgba(34,233,255,.25); align-items:center; justify-content:center; color:var(--cyan); box-shadow: 0 0 0 1px rgba(34,233,255,.06), inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.4); } .hero-trust-icon svg{ width:20px; height:20px; } .hero-trust-item>div{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; } .hero-trust-item strong{ display:block; font-family:var(--font-sans); font-size:.95rem; font-weight:600; color:#fff; line-height:1.2; letter-spacing:.005em; white-space:nowrap; } .hero-trust-item span{ display:block; font-size:.74rem; color:var(--text-mute); line-height:1.3; white-space:nowrap; letter-spacing:.005em; } /* On narrow viewports stack vertically */ @media (max-width: 760px){ .hero-trust{ grid-template-columns:1fr; gap:14px; } } /* ===== Hero Buttons · clean (no glow halos) ===== */ .btn.btn-icon{ min-width:auto !important; min-height:64px !important; padding:18px 36px 18px 30px !important; gap:12px; border-radius:999px; flex:0 0 auto; font-family:var(--font-sans) !important; font-weight:600; background:transparent !important; /* kill the original .btn radial gradient + animations */ transition:transform .25s ease, box-shadow .3s ease, filter .3s ease; } .btn.btn-icon::before, .btn.btn-icon::after{ display:none !important; content:none !important; } /* Filled primary — clean cyan-to-violet gradient pill */ .btn.btn-icon.btn-primary{ background:linear-gradient(120deg, #22e9ff 0%, #7a6bff 55%, #c062ff 100%) !important; color:#0a0a18; box-shadow: 0 12px 32px -8px rgba(122,107,255,.55), 0 0 0 1px rgba(255,255,255,.18) inset; } .btn.btn-icon.btn-primary>span{ color:#0a0a18; text-shadow:none; } .btn.btn-icon.btn-primary .btn-svg{ color:#0a0a18; filter:none; } .btn.btn-icon.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow: 0 18px 48px -8px rgba(122,107,255,.7), 0 0 0 1px rgba(255,255,255,.3) inset; } /* Outlined secondary — transparent with cyan border */ .btn.btn-icon.btn-secondary{ background:rgba(34,233,255,.05) !important; border:1.5px solid rgba(34,233,255,.55); color:#fff; box-shadow:0 0 0 1px rgba(34,233,255,.05); } .btn.btn-icon.btn-secondary>span{ color:#fff; text-shadow:none; } .btn.btn-icon.btn-secondary .btn-svg{ color:var(--cyan); filter:none; } .btn.btn-icon.btn-secondary:hover{ background:rgba(34,233,255,.1) !important; border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 0 24px rgba(34,233,255,.25); } .btn.btn-icon .btn-svg{ position:relative; z-index:2; width:18px; height:18px; flex:none; } .btn.btn-icon>span{ font-size:1rem !important; letter-spacing:.005em; white-space:nowrap; } /* Smaller scroll-hint at bottom of hero */ .hero-scroll{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.7rem; letter-spacing:.4em; color:var(--text-mute); z-index:4; animation:scrollBob 2.4s ease-in-out infinite; } .hero-scroll svg{ color:var(--cyan); filter:drop-shadow(0 0 6px rgba(34,233,255,.6)); } @keyframes scrollBob{ 0%,100%{ transform:translate(-50%, 0); opacity:.6; } 50% { transform:translate(-50%, 8px); opacity:1; } } /* Responsive collapse to single column */ @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } .hero-stage{ margin:0 auto; max-width:480px; aspect-ratio:1/1; } .hero-trust{ grid-template-columns:1fr; gap:14px; } } @media (max-width:640px){ .hero.hero--split{ padding:100px 18px 90px; } .hero-cta-row{ gap:14px; } .hero-cta-row .btn-icon{ flex:1 1 100%; } } /* ===== Buttons · clean (no halo, no image-bg) ===== */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; min-height:60px; padding:18px 36px; gap:10px; border-radius:999px; font-family:var(--font-sans); font-weight:600; letter-spacing:.005em; color:#fff; text-decoration:none; cursor:pointer; transition:transform .25s ease, box-shadow .3s ease, filter .25s ease, background .25s ease; white-space:nowrap; } .btn>span{ position:relative; z-index:2; font-size:1rem; } /* Filled primary — clean cyan-to-violet gradient */ .btn-primary{ background:linear-gradient(120deg, #22e9ff 0%, #7a6bff 55%, #c062ff 100%); color:#0a0a18; box-shadow: 0 12px 32px -8px rgba(122,107,255,.5), 0 0 0 1px rgba(255,255,255,.18) inset; } .btn-primary>span{ color:#0a0a18; } .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow: 0 18px 44px -8px rgba(122,107,255,.65), 0 0 0 1px rgba(255,255,255,.28) inset; } /* Outlined secondary — transparent with cyan border */ .btn-secondary{ background:rgba(34,233,255,.04); border:1.5px solid rgba(34,233,255,.5); color:#fff; } .btn-secondary:hover{ background:rgba(34,233,255,.1); border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 0 24px rgba(34,233,255,.25); } /* Mini variant for compact contexts (closing CTA in risk-free, contact, etc) */ .btn.mini{ min-height:52px; padding:14px 28px; } .btn.mini>span{ font-size:.92rem; } /* Mobile: enforce comfortable touch target on mini buttons regardless of container scaling, so cards in services grid stay tappable. */ @media (max-width:880px){ .btn.mini{ min-height:56px; padding:16px 28px; } .btn.mini>span{ font-size:.95rem; } } /* Submit form buttons (modal) keep some heft */ .btn-submit{ background:linear-gradient(120deg, #22e9ff 0%, #7a6bff 55%, #c062ff 100%); color:#0a0a18; } .btn-submit:hover{ filter:brightness(1.08); } /* ===== Ticker ===== */ .ticker{ border-top:1px solid var(--border);border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(34,233,255,.04), transparent); overflow:hidden;padding:18px 0;margin-top:-20px; } .ticker-track{ display:inline-flex;gap:36px;white-space:nowrap; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;font-size:.85rem;color:var(--text-mute); animation:ticker 38s linear infinite; } .ticker-track span:not(:first-child){opacity:.6} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== Stats ===== */ .stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px; padding-top:80px;padding-bottom:0; } .stat{ padding:32px 22px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--border); text-align:center;backdrop-filter:blur(8px); transition:transform .3s ease, border-color .3s, box-shadow .3s; } .stat:hover{transform:translateY(-4px);border-color:rgba(34,233,255,.3);box-shadow:var(--glow-cyan)} .stat-num{ font-family:var(--font-display);font-size:clamp(2rem,3vw,2.8rem);font-weight:700; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; letter-spacing:-.02em; } .stat-label{color:var(--text-mute);font-size:.92rem;margin-top:4px} @media (max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}} /* ===== Services ===== */ .services-head{max-width:760px;margin:0 auto 50px;text-align:center} .services-head p{margin-top:18px;font-size:1.05rem} /* Services scroll-pin stage: - .services-stage is a tall scroll runway (220vh) - .services-stage-pin sticks to the viewport for 120vh of scrubbing - The canvas frames are scrubbed against scroll progress through the stage */ .services-stage{ position:relative; /* runway für 43-Frame-Canvas-Scrub: 480vh → ~9vh Scroll pro Frame statt 5vh. Übergang spürbar langsamer und smoother. */ height:480vh; margin:40px calc(-1 * var(--pad-x)) 0; padding:0; } .services-stage-pin{ position:sticky;top:0; height:100dvh; display:grid;place-items:center; padding:0 var(--pad-x); isolation:isolate; overflow:hidden; } .services-canvas{ position:relative;z-index:2;display:block; width:min(100%, 1400px); height:min(82vh, 760px); filter:drop-shadow(0 30px 80px rgba(34,233,255,.22)) drop-shadow(0 40px 100px rgba(160,107,255,.22)); } .services-stage-glow{ position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(ellipse at 50% 50%, rgba(34,233,255,.18), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(160,107,255,.22), transparent 60%); filter:blur(40px); } .services-stage-hint{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%); z-index:3;display:flex;align-items:center;gap:10px; font-size:.7rem;letter-spacing:.4em;color:var(--text-mute); } .services-stage-hint span{ width:1px;height:30px;background:linear-gradient(to bottom, transparent, var(--cyan), transparent); animation:scrollLine 2.2s ease-in-out infinite; } .services-grid-wrap{margin-top:50px} .services-grid{ position:relative;z-index:1; display:grid;grid-template-columns:repeat(3, 1fr);gap:22px; } @media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.services-grid{grid-template-columns:1fr}} .card{ position:relative;padding:32px 28px;border-radius:var(--radius-l); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border:1px solid var(--border); isolation:isolate;overflow:hidden; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; backdrop-filter:blur(10px); } .card::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg, rgba(34,233,255,.5), rgba(160,107,255,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .35s ease;pointer-events:none; } .card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -30px rgba(122,107,255,.45)} .card:hover::before{opacity:1} .card-glow{ position:absolute;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle, rgba(34,233,255,.35), transparent 65%); filter:blur(40px); top:-100px;left:-100px;opacity:0;transition:opacity .4s; z-index:-1; } .card:hover .card-glow{opacity:1} .card-icon{ width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(135deg, rgba(34,233,255,.18), rgba(160,107,255,.18)); border:1px solid rgba(34,233,255,.25); color:var(--cyan); box-shadow:0 0 24px rgba(34,233,255,.25) inset; } .card-icon svg{width:26px;height:26px;stroke-linecap:round;stroke-linejoin:round} .card h3{margin-bottom:10px} .card p{font-size:.97rem} .card-list{margin-top:18px;display:flex;flex-direction:column;gap:8px} .card-list li{position:relative;padding-left:22px;color:var(--text-mute);font-size:.92rem} .card-list li::before{ content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%; background:var(--grad);box-shadow:0 0 10px rgba(34,233,255,.7); } .card-cta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px; background:linear-gradient(135deg, rgba(34,233,255,.12), rgba(160,107,255,.12)); border-color:rgba(122,107,255,.3); } .card-cta h3{font-size:1.4rem} /* ===== Hero Promise Badge ===== */ .hero-promise{ display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border:1px solid rgba(34,233,255,.4); border-radius:999px; background:linear-gradient(120deg, rgba(34,233,255,.08), rgba(160,107,255,.08)); font-family:var(--font-sans); font-size:.92rem; font-weight:500; color:#fff; letter-spacing:.005em; max-width:760px; text-align:center; box-shadow: 0 0 30px rgba(34,233,255,.15), inset 0 0 24px rgba(34,233,255,.08); backdrop-filter:blur(12px); } .hero-promise-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(34,233,255,.6); animation:promiseDot 2.4s ease-in-out infinite; flex:none; } @keyframes promiseDot{ 0% { box-shadow: 0 0 0 0 rgba(34,233,255,.7); } 60% { box-shadow: 0 0 0 12px rgba(34,233,255,0); } 100% { box-shadow: 0 0 0 0 rgba(34,233,255,0); } } /* ============================================================ MORPH SECTION · sticky-pinned word-swap (Superconscious-style) ============================================================ */ .morph{ position:relative; /* Scroll runway = ~260vh pro Word-Swap. 4 Wörter → 1050vh. Lange Sticky-Phase damit Schrift-Wechsel ruhig liest. */ height:1050vh; padding:0; max-width:none; margin:0; } .morph-pin{ position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; isolation:isolate; overflow:hidden; padding:0 var(--pad-x); gap:36px; } .morph-eyebrow{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border:1px solid rgba(34,233,255,.32); border-radius:999px; background:rgba(34,233,255,.06); backdrop-filter:blur(10px); font-family:var(--font-sans); font-size:.78rem; font-weight:600; color:var(--cyan); letter-spacing:.2em; text-transform:uppercase; } .morph-eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px rgba(34,233,255,.7); flex:none; animation:promiseDot 2.4s ease-in-out infinite; } .morph-title{ position:relative; z-index:2; font-family:'Manrope','Space Grotesk',sans-serif; font-weight:800; font-size:clamp(2.4rem, 6.5vw, 6.4rem); line-height:1.05; letter-spacing:-.04em; text-align:center; max-width:1280px; color:#fff; } .morph-static{ display:block; } .morph-static em{ font-style:normal; } .morph-rotate{ position:relative; display:block; height:1.1em; margin:.18em 0; } .morph-word{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:clamp(12px, 1.6vw, 22px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 30px rgba(122,107,255,.45)); opacity:0; transform:translateY(36px) scale(.96); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); white-space:nowrap; } .morph-word.is-active{ opacity:1; transform:translateY(0) scale(1); } .morph-glyph{ display:inline-flex; align-items:center; justify-content:center; width:clamp(50px, 6vw, 90px); height:clamp(50px, 6vw, 90px); flex:none; border:1.5px solid rgba(122,107,255,.55); border-radius:50%; background:rgba(122,107,255,.08); /* glyph color overrides the gradient text-fill */ color:#a5b4ff; -webkit-text-fill-color:#a5b4ff; box-shadow:0 0 24px rgba(122,107,255,.25), inset 0 0 14px rgba(34,233,255,.08); } .morph-glyph svg{ width:55%; height:55%; } /* progress rail at bottom of pin */ .morph-progress{ position:relative; z-index:2; width:min(360px, 60vw); height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:8px; } .morph-progress-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--cyan), var(--violet)); width:calc(var(--morph-progress, 0) * 100%); box-shadow:0 0 12px rgba(34,233,255,.6); transition:width 200ms linear; } /* atmospheric blobs that drift */ .morph-scenery{ position:absolute; inset:0; z-index:0; pointer-events:none; } .morph-blob{ position:absolute; width:50vmax; height:50vmax; border-radius:50%; filter:blur(120px); opacity:.45; } .morph-blob--1{ background:radial-gradient(circle, rgba(34,233,255,.5), transparent 60%); top:-15vmax; left:-15vmax; animation:blobFloat1 16s ease-in-out infinite alternate; } .morph-blob--2{ background:radial-gradient(circle, rgba(160,107,255,.5), transparent 60%); bottom:-20vmax; right:-15vmax; animation:blobFloat2 22s ease-in-out infinite alternate-reverse; } @keyframes blobFloat1{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(8vmax, 4vmax, 0); } } @keyframes blobFloat2{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-6vmax, -3vmax, 0); } } @media (max-width: 780px){ .morph-pin{ gap:24px; } .morph-glyph{ display:none; } .morph-word{ gap:0; } /* Mobile: deutlich längerer Runway — Schrift-Wechsel wischt nicht mehr durch */ .morph{ height:780vh; } } /* ===== Risk-Free Section · sticky-pinned 3-step USP ===== */ .risk-free{ position:relative; padding:0 var(--pad-x); max-width:none; } .risk-free-stage{ position:relative; /* 3 steps × ~80vh runway, plus a beat to read = 260vh total (langsameres Wechseln zwischen den 3 Schritten beim Scrollen) */ height:260vh; margin-bottom:clamp(56px, 7vw, 100px); } .risk-free-pin{ position:sticky; top:0; /* Pin must be ≤ viewport height for sticky to pin cleanly at top:0 across the whole runway. Cap at 100dvh and let content fit inside. */ height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; /* Top padding clears the fixed nav (~82px) plus breathing room. Bottom padding keeps the CTA out of the clipping zone. */ padding:clamp(96px, 11vh, 120px) 0 clamp(56px, 7vh, 80px); isolation:isolate; overflow:hidden; perspective:1400px; } /* Short viewports (e.g. laptops at 1080p w/ browser chrome): drop the pin so headline + 3 cards + CTA never clip. Animation logic still runs. */ @media (min-width:641px) and (max-height:760px){ .risk-free-stage{ height:auto; margin-bottom:clamp(56px, 7vw, 100px); } .risk-free-pin{ position:static; height:auto; min-height:100dvh; overflow:visible; padding:clamp(110px, 14vh, 140px) 0 clamp(72px, 9vh, 100px); } } .risk-free-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(34,233,255,.18), transparent 60%), radial-gradient(ellipse 60% 60% at 50% 80%, rgba(160,107,255,.18), transparent 60%); filter:blur(50px); animation:rfGlowDrift 14s ease-in-out infinite alternate; } @keyframes rfGlowDrift{ from{ transform: translate3d(-30px, 0, 0); } to { transform: translate3d( 30px, 0, 0); } } .risk-free-eyebrow{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border:1px solid rgba(34,233,255,.35); border-radius:999px; background:rgba(34,233,255,.08); font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:14px; box-shadow:0 0 24px rgba(34,233,255,.18) inset; } .risk-free-shield{ display:inline-flex; width:18px; height:18px; color:var(--cyan); } .risk-free-shield svg{ width:18px; height:18px; } /* Big 3D logo brand seal — sits above the eyebrow as a hero element */ .risk-free-logo3d{ position:relative; z-index:1; /* Smaller seal so the whole pin (logo + headline + sub + 3 steps + foot) fits inside one viewport — required for sticky pinning to work cleanly. */ width:clamp(160px, 18vw, 240px); height:clamp(160px, 18vw, 240px); margin:0 auto 18px; cursor:grab; filter:drop-shadow(0 30px 60px rgba(34,233,255,.22)) drop-shadow(0 16px 50px rgba(160,107,255,.22)); } .risk-free-logo3d:active{cursor:grabbing} .risk-free-logo3d .logo-3d-canvas{ width:100%!important; height:100%!important; display:block; } @media (max-width:760px){ .risk-free-logo3d{ width:clamp(200px, 60vw, 320px); height:clamp(200px, 60vw, 320px); margin:0 auto 22px; } } .risk-free-headline{ position:relative; z-index:1; font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem, 5vw, 4.4rem); line-height:.98; letter-spacing:-.035em; text-align:center; max-width:1100px; color:#fff; margin-bottom:18px; transform-style:preserve-3d; } .risk-free-headline .rf-line{ display:block; } .risk-free-headline .rf-line.accent{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 30px rgba(122,107,255,.5)); } .risk-free-sub{ position:relative; z-index:1; max-width:720px; text-align:center; font-size:clamp(.95rem, 1.15vw, 1.05rem); line-height:1.55; color:var(--text-mute); margin-bottom:30px; } .risk-free-sub strong{ color:#fff; font-weight:600; } .rf-steps{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; width:min(1100px, 100%); margin-bottom:24px; list-style:none; perspective:1200px; } @media (max-width:880px){.rf-steps{grid-template-columns:1fr}} .rf-step{ position:relative; padding:22px 22px 24px; border-radius:var(--radius-l); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border:1px solid var(--border); isolation:isolate; overflow:hidden; transform-style:preserve-3d; transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease; } .rf-step::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(34,233,255,.45), rgba(160,107,255,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s ease; pointer-events:none; } .rf-step:hover{ transform:translateY(-6px) translateZ(20px); border-color:transparent; box-shadow:0 30px 60px -30px rgba(122,107,255,.5); } .rf-step:hover::before{ opacity:1; } .rf-step--accent{ background:linear-gradient(160deg, rgba(34,233,255,.1), rgba(160,107,255,.1)); border-color:rgba(122,107,255,.35); transform:translateY(-12px) translateZ(30px); box-shadow:0 24px 60px -20px rgba(122,107,255,.45); } .rf-step--accent::before{ opacity:.6; } .rf-step.is-active{ transform: translateY(-12px) translateZ(40px) scale(1.04); border-color: rgba(34,233,255,.55); box-shadow: 0 30px 70px -20px rgba(34,233,255,.45), 0 0 60px rgba(122,107,255,.35); } .rf-step.is-active::before{ opacity:1; } .rf-letter{ display:inline-block; transition: transform .35s cubic-bezier(.22,1,.36,1); } .rf-step-num{ display:inline-block; font-family:var(--font-display); font-size:.85rem; font-weight:700; letter-spacing:.16em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; margin-bottom:14px; } .rf-step h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; letter-spacing:-.01em; line-height:1.15; margin-bottom:8px; color:#fff; } .rf-step p{ font-size:.95rem; color:var(--text-mute); line-height:1.55; } .rf-foot{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:20px; justify-content:center; } .rf-foot-tag{ font-size:.85rem; color:var(--text-mute); } /* ============================================================ SHOWCASE · tilted laptop with customer build (Superconscious-style) ============================================================ */ .showcase{ position:relative; padding:clamp(56px, 7vw, 100px) var(--pad-x); max-width:var(--container); margin:0 auto; } .showcase-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:clamp(24px, 5vw, 80px); align-items:center; } @media (max-width:980px){ .showcase-grid{ grid-template-columns:1fr; gap:40px; } } .showcase-content{ min-width:0; } .showcase-content h2{ margin:14px 0 18px; font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.05; } .showcase-content p{ font-size:1.05rem; max-width:480px; margin-bottom:24px; } .showcase-bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; } .showcase-bullets li{ display:flex; align-items:flex-start; gap:12px; font-size:.95rem; color:var(--text-mute); } .showcase-bullets li strong{ color:#fff; font-weight:600; margin-right:4px; } .showcase-check{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none; margin-top:2px; border-radius:50%; background:rgba(34,233,255,.15); border:1px solid rgba(34,233,255,.4); color:var(--cyan); } .showcase-check svg{ width:13px; height:13px; } /* eyebrow with inline glyph */ .eyebrow-glyph{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; color:inherit; } .eyebrow-glyph svg{ width:14px; height:14px; } /* Tilted laptop stage */ .showcase-stage{ position:relative; aspect-ratio:1.4 / 1; perspective:1400px; display:grid; place-items:center; isolation:isolate; } .showcase-glow{ position:absolute; inset:0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(34,233,255,.16), transparent 70%), radial-gradient(ellipse 80% 60% at 70% 80%, rgba(160,107,255,.18), transparent 70%); filter:blur(40px); z-index:0; } .showcase-laptop{ position:relative; width:88%; transform-style:preserve-3d; --rx:8deg; --ry:-12deg; --rz:-2deg; --sc:1; transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--sc)); z-index:2; will-change:transform; } .showcase-laptop-screen{ position:relative; aspect-ratio:16 / 10; border-radius:14px 14px 4px 4px; background:#0a0a18; border:2px solid rgba(255,255,255,.1); padding:10px 10px 14px; box-shadow: 0 0 0 1px rgba(34,233,255,.15), 0 50px 80px -20px rgba(0,0,0,.7), 0 0 80px rgba(122,107,255,.3); overflow:hidden; } .showcase-laptop-screen::before{ content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%); width:50px; height:4px; border-radius:2px; background:rgba(255,255,255,.06); } .showcase-laptop-screen img{ width:100%; height:100%; border-radius:6px; object-fit:cover; object-position:top center; display:block; } .showcase-laptop-base{ width:108%; height:14px; margin:-2px auto 0; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); border-radius:0 0 50% 50% / 0 0 100% 100%; box-shadow:0 6px 14px rgba(0,0,0,.5); } /* Floating orbit tags around laptop */ .showcase-orbit{ position:absolute; inset:0; z-index:3; pointer-events:none; } .showcase-orbit-tag{ position:absolute; padding:8px 14px; border-radius:999px; font-family:var(--font-sans); font-size:.78rem; font-weight:600; background:rgba(8,8,16,.85); border:1px solid rgba(34,233,255,.4); color:#fff; backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(34,233,255,.2); white-space:nowrap; animation:tagFloat 6s ease-in-out infinite alternate; } .tag-1{ top:8%; left:-2%; animation-delay:.0s; } .tag-2{ top:34%; right:-4%; animation-delay:1.5s; border-color:rgba(160,107,255,.5); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(160,107,255,.25); } .tag-3{ bottom:14%; left:6%; animation-delay:.7s; border-color:rgba(192,98,255,.5); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(192,98,255,.25); } @keyframes tagFloat{ from{ transform:translateY(0); } to { transform:translateY(-12px); } } /* ============================================================ METRICS · visual bento with mixed cards ============================================================ */ .metrics{ position:relative; padding:clamp(56px, 7vw, 100px) var(--pad-x); max-width:var(--container); margin:0 auto; } .metrics-bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; margin-top:50px; } .metric-card{ position:relative; border-radius:var(--radius-l); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border:1px solid var(--border); padding:28px 26px; isolation:isolate; overflow:hidden; transition:border-color .3s, box-shadow .3s; /* CSS-var-driven 3D entrance */ --m-rx:14deg; --m-z:-80px; --m-op:0; transform:translateZ(var(--m-z)) rotateX(var(--m-rx)); opacity:var(--m-op); transform-style:preserve-3d; will-change:transform, opacity; } .metrics-bento{ perspective:1400px; } .metric-card:hover{ border-color:rgba(34,233,255,.35); transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(122,107,255,.4); } .metric-card--lg{ grid-column:span 3; grid-row:span 2; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(34,233,255,.18), transparent 70%), linear-gradient(180deg, rgba(34,233,255,.06), rgba(160,107,255,.04)); border-color:rgba(34,233,255,.25); } .metric-card--ai{ grid-column:span 3; grid-row:span 2; background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(160,107,255,.18), transparent 70%), linear-gradient(160deg, rgba(160,107,255,.05), rgba(34,233,255,.03)); border-color:rgba(160,107,255,.25); } .metric-card--small{ grid-column:span 2; } @media (max-width:880px){ .metrics-bento{ grid-template-columns:repeat(2, 1fr); } .metric-card--lg, .metric-card--ai{ grid-column:span 2; grid-row:auto; } .metric-card--small{ grid-column:span 1; } } @media (max-width:520px){ .metric-card--small{ grid-column:span 2; } } .metric-tag{ font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.22em; color:var(--cyan); margin-bottom:14px; } .metric-bignum{ font-family:var(--font-display); font-weight:700; font-size:clamp(3.5rem, 6vw, 5.5rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; margin-bottom:18px; letter-spacing:-.04em; } .metric-bignum .metric-num{ display:inline; } .metric-bignum .metric-unit{ font-size:.45em; opacity:.6; -webkit-text-fill-color:rgba(255,255,255,.6); background:none; margin-left:6px; } .metric-bars{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:14px; } .metric-bar{ position:relative; height:90px; background:rgba(255,255,255,.04); border-radius:8px; overflow:hidden; display:flex; flex-direction:column-reverse; } .metric-bar span{ display:block; width:100%; height:var(--p, 50%); background:linear-gradient(180deg, var(--cyan), var(--violet)); border-radius:8px 8px 0 0; box-shadow:0 0 14px rgba(34,233,255,.45); animation:barFill .9s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(var(--i, 0) * 100ms); } @keyframes barFill{ from{ height:0; } } .metric-bar label{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-family:var(--font-sans); font-size:.62rem; font-weight:600; color:#fff; letter-spacing:.1em; text-shadow:0 0 6px rgba(0,0,0,.7); } .metric-cap{ font-size:.85rem; color:var(--text-mute); margin-top:auto; line-height:1.5; } /* AI chat tile */ .metric-ai-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:.74rem; font-weight:600; letter-spacing:.16em; color:var(--violet); text-transform:uppercase; margin-bottom:16px; } .ai-pulse{ width:8px; height:8px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 0 rgba(160,107,255,.6); animation:promiseDot 2s ease-in-out infinite; } .metric-card--ai h3{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.15; letter-spacing:-.01em; margin-bottom:18px; color:#fff; } .metric-ai-chat{ display:flex; flex-direction:column; gap:8px; font-size:.82rem; } .metric-ai-chat .msg{ display:flex; } .metric-ai-chat .msg-bot{ justify-content:flex-start; } .metric-ai-chat .msg-user{ justify-content:flex-end; } .metric-ai-chat .msg span{ display:inline-block; max-width:78%; padding:8px 12px; border-radius:14px; line-height:1.4; } .metric-ai-chat .msg-bot span{ background:rgba(255,255,255,.06); color:#e2e0f2; border-bottom-left-radius:4px; } .metric-ai-chat .msg-user span{ background:linear-gradient(135deg, var(--violet), var(--violet-2)); color:#fff; border-bottom-right-radius:4px; } /* Small metric cards */ .metric-icon{ width:40px; height:40px; border-radius:10px; background:linear-gradient(160deg, rgba(15,15,30,.9), rgba(20,20,38,.7)); border:1px solid rgba(34,233,255,.25); display:flex; align-items:center; justify-content:center; color:var(--cyan); margin-bottom:18px; } .metric-icon svg{ width:20px; height:20px; } .metric-num-md{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 3.5vw, 2.6rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; letter-spacing:-.025em; margin-bottom:8px; } .metric-num-md .metric-unit{ font-size:.5em; opacity:.6; -webkit-text-fill-color:rgba(255,255,255,.6); background:none; margin-left:4px; } /* ============================================================ MINI CHART · climbing line inside metrics-bento (Auffindbarkeit) ============================================================ */ .metric-card--chart{ display:flex; flex-direction:column; gap:10px; } .metric-card-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.2; color:#fff; letter-spacing:-.005em; } .mini-chart{ display:block; width:100%; height:80px; margin:6px 0 4px; filter:drop-shadow(0 8px 18px rgba(122,107,255,.35)); overflow:visible; } /* Clip-rect grows from 0 → 200 left-to-right, revealing the organic line slowly. Duration 4.6s → feels like a real ticker drawing the chart in real time. */ .mini-chart-clip{ width:0; transition:width 4.6s cubic-bezier(.4,0,.2,1) .25s; } .mini-chart-line{ opacity:0; transition:opacity .6s ease; } .mini-chart-fill{ opacity:0; transition:opacity 1.4s ease 1.0s; } .mini-chart-dot{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; transition:opacity .5s ease 4.4s, transform .6s cubic-bezier(.34,1.56,.64,1) 4.4s; } .metric-card--chart.is-climbed .mini-chart-clip{ width:200px; } .metric-card--chart.is-climbed .mini-chart-line{ opacity:1; } .metric-card--chart.is-climbed .mini-chart-fill{ opacity:1; } .metric-card--chart.is-climbed .mini-chart-dot{ opacity:1; transform:scale(1); animation:miniDotPulse 2.6s ease-in-out 5s infinite; } @keyframes miniDotPulse{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(192,98,255,.6)); } 50% { filter:drop-shadow(0 0 14px rgba(192,98,255,1)); } } /* removed-old-results-section block kept for backwards compat (unused) */ .results{ display:none; } .results-head{ max-width:760px; text-align:center; margin:0 auto 60px; } .results-head h2{ margin:14px 0 18px; font-size:clamp(2.4rem, 5vw, 4.4rem); line-height:1.02; letter-spacing:-.035em; } .results-head p{ font-size:1.05rem; max-width:560px; margin:0 auto; } .results-stage{ position:relative; border-radius:var(--radius-l); background: radial-gradient(ellipse 40% 50% at 90% 10%, rgba(122,107,255,.18), transparent 60%), radial-gradient(ellipse 50% 50% at 10% 90%, rgba(34,233,255,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)); border:1px solid var(--border); padding:36px 36px 24px; isolation:isolate; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.6); } .results-stage::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 80px 80px; mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%); } .results-legend{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:14px; padding-left:8px; position:relative; z-index:2; } .legend-item{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:.82rem; font-weight:500; color:var(--text-mute); } .legend-dot{ width:10px; height:10px; border-radius:50%; flex:none; } .legend-before .legend-dot{ background:rgba(255,255,255,.3); border:1px dashed rgba(255,255,255,.5); } .legend-after .legend-dot{ background:linear-gradient(120deg, var(--cyan), var(--violet)); box-shadow:0 0 10px rgba(122,107,255,.6); } .legend-after{ color:#fff; } .results-chart-wrap{ position:relative; width:100%; aspect-ratio:1200 / 460; z-index:2; } .results-chart{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* Draw animations · controlled via .is-drawn class on the stage */ .chart-line{ stroke-dasharray:2400; stroke-dashoffset:2400; transition:stroke-dashoffset 2.4s cubic-bezier(.22,1,.36,1) .25s; } .chart-line-before{ transition-duration:1.6s; transition-delay:.05s; } .chart-fill{ opacity:0; transition:opacity 1.4s cubic-bezier(.22,1,.36,1) 1.5s; } .chart-points circle{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; transition:opacity .5s, transform .6s cubic-bezier(.34,1.56,.64,1); } .results-stage.is-drawn .chart-line{ stroke-dashoffset:0; } .results-stage.is-drawn .chart-fill{ opacity:1; } .results-stage.is-drawn .chart-points circle{ opacity:1; transform:scale(1); } .results-stage.is-drawn .chart-points circle:nth-child(1){ transition-delay: .9s; } .results-stage.is-drawn .chart-points circle:nth-child(2){ transition-delay:1.3s; } .results-stage.is-drawn .chart-points circle:nth-child(3){ transition-delay:1.7s; } .results-stage.is-drawn .chart-points circle:nth-child(4){ transition-delay:2.1s; } .results-stage.is-drawn .chart-points circle:nth-child(5){ transition-delay:2.5s; animation:pointPulse 2.6s ease-in-out 3.1s infinite; } @keyframes pointPulse{ 0%,100%{ filter:drop-shadow(0 0 10px rgba(192,98,255,.5)); } 50% { filter:drop-shadow(0 0 22px rgba(192,98,255,.95)); } } /* Floating chart annotations */ .chart-tag{ position:absolute; padding:14px 18px; background:rgba(8,8,16,.85); border:1px solid rgba(34,233,255,.3); border-radius:14px; backdrop-filter:blur(10px); box-shadow:0 18px 40px -8px rgba(0,0,0,.6), 0 0 24px rgba(34,233,255,.15); opacity:0; transform:translateY(12px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); z-index:3; white-space:nowrap; } .chart-tag-num{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; letter-spacing:-.02em; margin-bottom:4px; } .chart-tag--start .chart-tag-num{ background:rgba(255,255,255,.7); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .chart-tag-lab{ font-size:.72rem; line-height:1.35; color:var(--text-mute); } .chart-tag--start{ bottom:14%; left:5%; border-color:rgba(255,255,255,.18); } .chart-tag--end{ top:6%; right:6%; border-color:rgba(192,98,255,.45); box-shadow:0 18px 40px -8px rgba(0,0,0,.6), 0 0 24px rgba(192,98,255,.25); } .chart-tag--delta{ top:42%; left:46%; border-color:rgba(122,107,255,.45); box-shadow:0 18px 40px -8px rgba(0,0,0,.6), 0 0 24px rgba(122,107,255,.3); } .results-stage.is-drawn .chart-tag{ opacity:1; transform:translateY(0); } .results-stage.is-drawn .chart-tag--start{ transition-delay:.5s; } .results-stage.is-drawn .chart-tag--delta{ transition-delay:1.6s; } .results-stage.is-drawn .chart-tag--end{ transition-delay:2.6s; } .results-footnote{ margin-top:16px; padding:0 8px; font-size:.74rem; color:var(--text-mute); letter-spacing:.04em; position:relative; z-index:2; } @media (max-width: 760px){ .results-stage{ padding:24px 16px 18px; } .chart-tag{ padding:10px 12px; } .chart-tag-num{ font-size:1.2rem; } .chart-tag-lab{ font-size:.65rem; } .chart-tag--delta{ display:none; } } /* ============================================================ PHONE SHOWCASE · tilted phone with mobile-first pitch ============================================================ */ .phone-showcase{ position:relative; padding:clamp(56px, 7vw, 100px) var(--pad-x); max-width:var(--container); margin:0 auto; } .phone-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:clamp(24px, 5vw, 80px); align-items:center; } @media (max-width:980px){ .phone-grid{ grid-template-columns:1fr; gap:40px; } .phone-grid .phone-stage{ order:2; } } .phone-content h2{ font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.05; margin:14px 0 18px; } .phone-content p{ font-size:1.05rem; max-width:480px; margin-bottom:30px; } .phone-stats-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:24px; } .phone-stat{ padding:18px 16px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; } .phone-stat strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; letter-spacing:-.02em; margin-bottom:4px; } .phone-stat span{ font-size:.78rem; color:var(--text-mute); line-height:1.3; } /* Phone stage — 2D mockup, never rotates to show the back. Cool hover-lift. */ .phone-stage{ position:relative; aspect-ratio:.7 / 1; max-width:380px; margin:0 auto; display:grid; place-items:center; } .phone-glow{ position:absolute; inset:-12%; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34,233,255,.22), transparent 70%), radial-gradient(ellipse 50% 60% at 50% 70%, rgba(160,107,255,.28), transparent 70%); filter:blur(50px); z-index:0; transition:filter .6s cubic-bezier(.22,1,.36,1), opacity .6s ease; } .phone-stage:hover .phone-glow{ filter:blur(60px) saturate(1.3); opacity:1.15; } .phone-frame{ position:relative; width:100%; height:100%; border-radius:46px; /* Outer bezel — brushed aluminum effect */ background: linear-gradient(135deg, #2a2c3e 0%, #14151f 40%, #0a0b14 60%, #1c1d2a 100%); border:1px solid rgba(255,255,255,.08); padding:10px; z-index:2; /* Subtle constant lift via shadow stack */ box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(34,233,255,.15), 0 30px 60px -15px rgba(0,0,0,.65), 0 60px 100px -20px rgba(122,107,255,.25), 0 0 60px rgba(34,233,255,.18); transform:translateY(0); transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1); will-change:transform; } .phone-stage:hover .phone-frame{ transform:translateY(-10px); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.10) inset, 0 0 0 1px rgba(34,233,255,.30), 0 50px 80px -15px rgba(0,0,0,.75), 0 80px 120px -20px rgba(122,107,255,.45), 0 0 100px rgba(34,233,255,.30); } /* Side rim highlight — gives the phone a metallic edge */ .phone-frame::before{ content:""; position:absolute; inset:0; border-radius:46px; background:linear-gradient(90deg, rgba(255,255,255,.10) 0%, transparent 8%, transparent 92%, rgba(255,255,255,.10) 100%); pointer-events:none; z-index:4; } /* Dynamic Island — replaces the legacy notch */ .phone-notch{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#000; border-radius:14px; z-index:5; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; } .phone-notch::after{ content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #1a3340 0%, #0a1418 80%); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; } .phone-screen{ position:relative; width:100%; height:100%; border-radius:30px; background:linear-gradient(180deg, #0a0a1f 0%, #150b25 60%, #0a0a18 100%); overflow:hidden; display:flex; flex-direction:column; padding:32px 18px 18px; } .phone-status{ display:flex; justify-content:space-between; font-family:var(--font-sans); font-size:.7rem; font-weight:600; color:#fff; margin-bottom:14px; } .phone-icons{ letter-spacing:.1em; opacity:.7; } .phone-hero{ flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; } .phone-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(34,233,255,.12); border:1px solid rgba(34,233,255,.35); font-size:.68rem; font-weight:600; color:#cfeefa; } .phone-pill-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px rgba(34,233,255,.7); } .phone-hero h4{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; line-height:.95; letter-spacing:-.025em; color:#fff; } .phone-cta{ padding:10px 20px; border-radius:999px; background:linear-gradient(120deg, var(--cyan), var(--violet)); border:none; color:#0a0a18; font-family:var(--font-sans); font-weight:600; font-size:.78rem; cursor:pointer; margin-top:6px; box-shadow:0 6px 18px -4px rgba(122,107,255,.55); } .phone-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); } .phone-stats div{ display:flex; flex-direction:column; align-items:center; text-align:center; } .phone-stats strong{ font-family:var(--font-display); font-size:1rem; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .phone-stats span{ font-size:.6rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; } /* ===== Process · sticky-pinned 3D phase walk ===== */ .process{ position: relative; padding: 0 var(--pad-x); max-width: none; } .process-head{ max-width: 760px; margin: 0 auto 40px; text-align: center; padding-top: clamp(56px, 7vw, 100px); } .process-head p{ margin-top: 18px; font-size: 1.05rem; } .process-stage{ position: relative; /* 4 Phasen × 180vh Runway = 720vh. Phasen halten deutlich länger auf Screen — ruhiges Lesen, kein Durchwischen beim Scrollen. */ height: 720vh; margin-bottom: clamp(56px, 7vw, 100px); } .process-pin{ position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; isolation: isolate; overflow: hidden; perspective: 1600px; perspective-origin: 50% 45%; } /* Vertical rail with progress fill + 4 dots */ .process-rail{ position: absolute; top: 18%; bottom: 18%; /* Rail an die linke Seite — Schrift kann sich nicht mehr mit dem Balken überlagern. Nummern + Headlines starten rechts vom Rail. */ left: clamp(40px, 11vw, 200px); transform: translateX(-50%); width: 2px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.08) 12%, rgba(255,255,255,.08) 88%, transparent); border-radius: 2px; z-index: 1; } .process-rail-fill{ position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--cyan), var(--violet)); box-shadow: 0 0 24px rgba(34,233,255,.5); transition: height .6s cubic-bezier(.22,1,.36,1); border-radius: 2px; } .process-rail-dots{ position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: space-between; } .process-rail-dots>span{ width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255,255,255,.18); margin-left: -6px; transition: border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .process-rail-dots>span.active{ border-color: var(--cyan); background: var(--cyan); transform: scale(1.3); box-shadow: 0 0 24px rgba(34,233,255,.8); } .process-rail-dots>span.past{ border-color: var(--violet); background: var(--violet); } /* Phases stacked at center, opacity + Z transforms drive cycling */ .phases{ position: relative; z-index: 2; width: min(86vw, 920px); height: 60vh; list-style: none; transform-style: preserve-3d; } .phase{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; /* Schrift weit rechts vom Rail starten, damit sich beide nicht überlagern */ padding: 0 0 0 clamp(96px, 22vw, 320px); text-align: left; transform-style: preserve-3d; opacity: 0; transform: translateZ(-220px) translateY(80px); filter: blur(8px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1); pointer-events: none; } .phase.is-active{ opacity: 1; transform: translateZ(0) translateY(0); filter: blur(0); pointer-events: auto; } .phase.is-past{ opacity: 0; transform: translateZ(280px) translateY(-60px); filter: blur(10px); } .phase-num{ display: inline-block; font-family: var(--font-display); font-size: clamp(5rem, 10vw, 9rem); font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; line-height: 1; letter-spacing: -.05em; margin-bottom: 12px; filter: drop-shadow(0 0 30px rgba(122,107,255,.45)); } .phase h3{ font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin-bottom: 18px; color: #fff; } .phase p{ font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.6; max-width: 520px; color: var(--text-mute); } .process-glow{ position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(34,233,255,.14), transparent 60%), radial-gradient(ellipse 60% 60% at 50% 40%, rgba(160,107,255,.14), transparent 60%); filter: blur(40px); } @media (max-width: 780px){ /* Deutlich mehr Runway → Phasen-Wechsel auf dem Handy ruhig & lesbar */ .process-stage{ height: 600vh; } .phases{ height: 72vh; } /* Rail an den linken Rand schieben + Text rechts daneben, damit Schrift und Balken sich nicht mehr überlagern */ .process-rail{ left: 22px; } .process-rail-dots>span{ margin-left: -7px; } .phase{ padding-left: 56px; } .phase p{ max-width: none; } } /* ===== About ===== */ .about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center} @media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px}} .about-text h2{margin:8px 0 18px} .about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px} .about-points>div{ padding:18px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border); } .about-points strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:#fff} .about-points span{font-size:.85rem;color:var(--text-mute)} @media (max-width:520px){.about-points{grid-template-columns:1fr}} .about-frame{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:480px;margin:0 auto;width:100%} .about-orb{ position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg, #22e9ff, #6a3cff, #c062ff, #22e9ff); filter:blur(60px);opacity:.5; animation:spin 18s linear infinite; } .about-frame img{ position:relative;width:70%;height:70%;object-fit:contain; filter:drop-shadow(0 0 40px rgba(34,233,255,.5)); } .about-logo3d{ position:relative;z-index:1; width:78%;height:78%; cursor:grab; filter:drop-shadow(0 30px 60px rgba(34,233,255,.28)) drop-shadow(0 16px 50px rgba(160,107,255,.28)); } .about-logo3d:active{cursor:grabbing} .about-logo3d .logo-3d-canvas{ width:100%!important;height:100%!important;display:block; } @keyframes spin{to{transform:rotate(360deg)}} /* ===== Team ===== */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px} .team-grid.team-grid--two{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; gap: 28px; } @media (max-width:780px){.team-grid,.team-grid.team-grid--two{grid-template-columns:1fr}} .member{ padding:34px 26px;border-radius:var(--radius-l); background:var(--surface);border:1px solid var(--border); text-align:center;transition:transform .3s, border-color .3s, box-shadow .3s; } .member:hover{transform:translateY(-4px);border-color:rgba(160,107,255,.35);box-shadow:var(--glow-violet)} .member-avatar{ width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px; background:var(--grad);font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:#06080f; box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 30px -10px rgba(122,107,255,.6); } .member h4{margin-bottom:4px} .member p{font-size:.9rem} /* ===== Contact ===== */ .contact-card{ position:relative;padding:clamp(36px,5vw,64px);border-radius:var(--radius-l); background:linear-gradient(160deg, rgba(34,233,255,.08), rgba(160,107,255,.08)); border:1px solid var(--border); text-align:center;overflow:hidden; } .contact-card::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px; background:linear-gradient(135deg, rgba(34,233,255,.55), rgba(160,107,255,.55)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } .contact-card h2{margin:8px 0 14px} .contact-card p{max-width:560px;margin:0 auto} .contact-info{ display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:36px 0 } .contact-item{ display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:14px; background:var(--surface-2);border:1px solid var(--border); transition:transform .3s, border-color .3s, box-shadow .3s } .contact-item:hover{transform:translateY(-2px);border-color:rgba(34,233,255,.35);box-shadow:var(--glow-cyan)} .contact-item svg{width:22px;height:22px;color:var(--cyan)} .contact-item span{display:block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute)} .contact-item strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff} .contact-cta-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:10px} /* ===== Footer ===== */ .footer{ border-top:1px solid var(--border); margin-top:60px; padding:50px var(--pad-x) 28px; background:linear-gradient(180deg, transparent, rgba(34,233,255,.03)); } .footer-top{ max-width:var(--container);margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .footer-top nav{display:flex;gap:24px;font-size:.95rem;color:var(--text-mute)} .footer-top nav a:hover{color:#fff} .footer-bottom{ max-width:var(--container);margin:30px auto 0;padding-top:22px; border-top:1px solid var(--border); display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; font-size:.85rem;color:var(--text-mute); } .footer-bottom div{display:flex;gap:18px} .footer-bottom a:hover{color:#fff} /* ===== Reveal Animations ===== */ .reveal{ opacity:0;transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .reveal.in{opacity:1;transform:translateY(0)} /* ===== Performance · disable expensive idle animations ===== */ .orb-cyan, .orb-violet{ animation:none !important; } /* ============================================================ PRELOADER · loading bar before site appears ============================================================ */ .preloader{ position:fixed; inset:0; z-index:99999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .9s cubic-bezier(.4,0,.2,1) .15s, visibility .9s ease .15s; overflow:hidden; } .preloader::before{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(34,233,255,.08), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 80%, rgba(160,107,255,.06), transparent 70%); pointer-events:none; } .preloader-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:32px; padding:0 24px; } .preloader-logo{ display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:600; font-size:1.6rem; letter-spacing:.01em; color:#fff; } .preloader-logo img{ width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 0 14px rgba(34,233,255,.55)); } .preloader-logo em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .preloader-bar{ width:280px; height:2px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; position:relative; } .preloader-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--violet), var(--cyan)); background-size:200% 100%; border-radius:2px; box-shadow:0 0 12px rgba(34,233,255,.6); animation: preloaderFill 1.6s cubic-bezier(.4,0,.2,1) forwards, preloaderShimmer 1.6s linear infinite; } @keyframes preloaderFill{ 0% { width:0%; } 60% { width:62%; } 100% { width:100%; } } @keyframes preloaderShimmer{ from { background-position:0% 0%; } to { background-position:200% 0%; } } .preloader-status{ font-family:var(--font-mono, var(--font-sans)); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--text-mute); } /* When ready, fade out preloader */ html:not(.is-loading) .preloader{ opacity:0; visibility:hidden; pointer-events:none; } /* ============================================================ HERO v3 ENTRANCE CASCADE while .is-loading: hide all hero pieces. when .ready: cascade them in with delays. ============================================================ */ .hero-pill, .hl-line, .hero-lede, .hero-cta-row, .hero-meta, .hero-marquee, .hero-scroll, .hero-aurora, .hero-dotgrid{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); } .hero-aurora,.hero-dotgrid{ transform:none; transition:opacity 2s ease; } html.ready .hero-aurora { opacity:1; transition-delay:0s; } html.ready .hero-dotgrid { opacity:.4; transition-delay:.2s; } html.ready .hero-pill { opacity:1; transform:none; transition-delay:.1s; } html.ready .hl-line:nth-of-type(1) { opacity:1; transform:none; transition-delay:.3s; } html.ready .hl-line:nth-of-type(2) { opacity:1; transform:none; transition-delay:.55s; } html.ready .hero-lede { opacity:1; transform:none; transition-delay:.85s; } html.ready .hero-cta-row { opacity:1; transform:none; transition-delay:1.05s; } html.ready .hero-meta { opacity:1; transform:none; transition-delay:1.25s; } html.ready .hero-marquee { opacity:1; transform:none; transition-delay:1.5s; } html.ready .hero-scroll { opacity:1; transform:none; transition-delay:1.75s; } /* Backward-compat keep-loading rules for old elements (just in case they're still queried) */ html.is-loading .hero-figure, html.is-loading .hero-pedestal, html.is-loading .hero-streaks{ opacity:0; } @media (prefers-reduced-motion: reduce){ .preloader-fill{ animation:preloaderFill .3s linear forwards; } .hero-pill,.hl-line,.hero-lede,.hero-cta-row,.hero-meta,.hero-marquee,.hero-scroll, .hero-aurora,.hero-dotgrid{ opacity:1 !important; transform:none !important; transition:none !important; } .aurora-blob{ animation:none !important; } .hero-marquee-track{ animation:none !important; } } /* ===== Reveal · stagger variants (set --reveal-i index via JS) ===== */ .reveal{ --reveal-i: 0; } .reveal.in{ transition-delay: calc(var(--reveal-i) * 90ms); } /* ============================================================ SITE-WIDE ANIMATION LAYER · v3 · "krasses Startup" pass ============================================================ */ /* ===== Universal 3D tilt + cursor spotlight on cards ===== */ .card, .member, .stat, .contact-item, .about-points>div, .about-frame{ transform-style: preserve-3d; perspective: 1000px; --mx: 50%; --my: 50%; --tilt-x: 0deg; --tilt-y: 0deg; will-change: transform; } .card, .member, .stat, .contact-item, .about-points>div{ transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); } /* spotlight overlay shows where cursor is (only when hovered) */ .card .spot, .member .spot, .stat .spot, .contact-item .spot{ position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:0;transition:opacity .35s ease; background:radial-gradient(circle 280px at var(--mx) var(--my), rgba(255,255,255,.08), transparent 60%); z-index:0; mix-blend-mode:plus-lighter; } .card:hover .spot, .member:hover .spot, .stat:hover .spot, .contact-item:hover .spot{opacity:1} /* contact-item & stat & about-points need position relative + isolation for spot */ .stat, .contact-item, .about-points>div{ position:relative; isolation:isolate; } /* ===== Card icon hover dance ===== */ .card-icon{ transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; } .card:hover .card-icon{ transform: rotate(-6deg) scale(1.08) translateZ(20px); box-shadow:0 0 32px rgba(34,233,255,.4) inset, 0 18px 40px -10px rgba(122,107,255,.35); } .card-icon svg{ transition: transform .5s cubic-bezier(.22,1,.36,1); } .card:hover .card-icon svg{ transform: rotate(6deg); } /* Small floating idle on the bullet glow dots */ .card-list li::before{ animation: bulletPulse 3.2s ease-in-out infinite; animation-delay: calc(var(--reveal-i, 0) * 0.18s); } @keyframes bulletPulse{ 0%,100%{ transform: scale(1); box-shadow: 0 0 10px rgba(34,233,255,.7); } 50% { transform: scale(1.15); box-shadow: 0 0 18px rgba(122,107,255,.9); } } /* ===== Member avatar — pulsing breathing ===== */ .member-avatar{ transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; animation: avatarBreathe 4.5s ease-in-out infinite; } @keyframes avatarBreathe{ 0%,100%{ box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 30px -10px rgba(122,107,255,.6), 0 0 0 0 rgba(34,233,255,0); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 16px 38px -10px rgba(122,107,255,.8), 0 0 0 12px rgba(34,233,255,.08); } } .member:hover .member-avatar{ transform: rotate(-4deg) scale(1.08) translateZ(20px); } /* ===== Stat card · scroll-tied number breathing ===== */ .stat-num{ transition: text-shadow .35s ease, transform .35s ease; } .stat:hover .stat-num{ transform: scale(1.04) translateZ(15px); text-shadow: 0 0 24px rgba(122,107,255,.45); } /* ===== Section dividers · animated gradient pulse line ===== */ .divider{ position:relative; height:1px; margin:0 auto; max-width:var(--container); width: calc(100% - var(--pad-x) * 2); background: linear-gradient(90deg, transparent 0%, rgba(34,233,255,.5) 50%, transparent 100%); opacity:.7; z-index: 1; } .divider::before{ content:""; position:absolute; top:-3px; left:50%; transform: translateX(-50%); width: 6px; height: 7px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 18px rgba(34,233,255,.9), 0 0 38px rgba(122,107,255,.6); animation: dividerDot 3.4s ease-in-out infinite; } @keyframes dividerDot{ 0%{ left: 12%; opacity:.5; transform: translateX(-50%) scale(.8); } 50%{ left: 88%; opacity:1; transform: translateX(-50%) scale(1.2); } 100%{ left: 12%; opacity:.5; transform: translateX(-50%) scale(.8); } } /* ===== Section header parallax · scroll-driven scale-in ===== */ .services-head h2, .about-text h2, .contact-card h2{ transform-origin: center; will-change: transform; } /* ===== About-frame — 3D mouse tilt + slow rotation ===== */ .about-frame{ transition: transform .8s cubic-bezier(.22,1,.36,1); } .about-orb{ animation: spin 26s linear infinite, orbBreathe 8s ease-in-out infinite; } @keyframes orbBreathe{ 0%,100%{ filter: blur(60px); opacity:.5; } 50% { filter: blur(80px); opacity:.65; } } .about-frame img{ transition: transform 1.2s cubic-bezier(.22,1,.36,1); animation: floatLogo 5.5s ease-in-out infinite; } @keyframes floatLogo{ 0%,100%{ transform: translateY(0) translateZ(0); } 50% { transform: translateY(-10px) translateZ(20px); } } /* ===== Contact card · breathing gradient border ===== */ .contact-card::after{ animation: contactBorderPulse 5s ease-in-out infinite; } @keyframes contactBorderPulse{ 0%,100%{ background: linear-gradient(135deg, rgba(34,233,255,.55), rgba(160,107,255,.55)); } 33% { background: linear-gradient(135deg, rgba(160,107,255,.6), rgba(192,98,255,.5)); } 66% { background: linear-gradient(135deg, rgba(192,98,255,.55), rgba(34,233,255,.55)); } } /* ===== Footer · subtle gradient drift ===== */ .footer{ position:relative; } .footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(34,233,255,.5) 30%, rgba(160,107,255,.5) 70%, transparent); } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important} .hero-title .line>span{transform:translateY(0)} .reveal{opacity:1;transform:none} .card,.member,.stat,.contact-item{transform:none !important} .member-avatar{animation:none} .about-orb,.about-frame img{animation:none} } /* ===== Mobile tweaks ===== */ @media (max-width:980px){ .services-canvas{height:min(78vh, 680px)} } @media (max-width:640px){ /* hero is content-sized (min-height:100dvh) on mobile — the legacy 260vh runway was for a removed scroll-tied F-logo and only created dead space between the hero and the next section */ .hero-sticky{padding:120px 18px 70px} .hero-title{font-size:clamp(2.6rem, 14vw, 5rem)} .btn{min-width:300px;min-height:88px;padding:26px 44px} .btn>span{font-size:1.1rem} .about-points{grid-template-columns:1fr 1fr} /* Mobile Canvas absichtlich kleiner als auf Desktop: weniger Pixelfläche → weniger Fillrate pro Frame → ruckelfreies Scrubbing auch während iOS Momentum-Scroll. 360vh Runway bleibt gleich, damit pro Scroll-Tick weniger Frames übersprungen werden. */ .services-stage{height:360vh;margin-left:-18px;margin-right:-18px} .services-stage-pin{padding:0 18px} .services-canvas{height:min(70vh, 560px);width:92vw;max-width:1100px} /* Risk-Free Mobile: Pin droppen — Inhalt (3D-Logo + 3 gestapelte Cards) ist größer als ein Viewport, dadurch klebte der Pin praktisch gar nicht. Stattdessen normaler Flow + scroll-tied Step-Highlight bleibt aktiv. */ .risk-free-stage{ height:auto; margin-bottom:clamp(60px, 10vw, 100px); } .risk-free-pin{ position:static; height:auto; min-height:0; overflow:visible; padding:clamp(96px, 18vw, 130px) 0 clamp(40px, 8vw, 60px); } } @media (max-width:380px){ .btn{min-width:260px;min-height:78px;padding:22px 28px} .btn>span{font-size:1rem} } /* ============================================================ HERO ANIMATION LAYER · v2 · $1M ARR Treatment ============================================================ */ /* ===== 1 · Multi-layer parallax + 3D perspective ===== */ .hero-sticky{ perspective: 1400px; perspective-origin: 50% 50%; } .ambient{ transform-style: preserve-3d; will-change: transform; } .orb, .grid{ will-change: transform; transition: transform .9s cubic-bezier(.22,1,.36,1); } /* ===== 2 · 3D-Title scroll-tied depth ===== */ .hero-title{ transform-style: preserve-3d; will-change: transform, filter; } .hero-title .line{ transform-style: preserve-3d; will-change: transform, opacity, filter; transition: filter .8s cubic-bezier(.22,1,.36,1); } /* ===== 3 · Word-by-word blur reveal (overrides line>span animation) ===== */ .hero-title .line>span{ display: inline-block; } .hero-title .reveal-word{ display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(60%); transition: opacity .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); } .hero-title.is-revealed .reveal-word{ opacity: 1; filter: blur(0); transform: translateY(0); } /* Override the existing .line>span rise animation when we use word-reveal */ .hero-title.is-split .line>span{ animation: none !important; transform: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit; } .hero-title.is-split .line:not(.accent)>span{ color: #fff; -webkit-text-fill-color: #fff !important; background: none !important; } .hero-title.is-split .line:not(.accent) .reveal-word{ background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,.55) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero-title.is-split .line.accent>span{ background: none !important; color: inherit; filter: drop-shadow(0 0 30px rgba(122,107,255,.45)); } .hero-title.is-split .line.accent .reveal-word{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ===== 4 · Magnetic CTA support ===== */ .btn{ will-change: transform; } /* ===== 5 · Cursor Glow ===== */ .cursor-glow{ position: fixed; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(34,233,255,.16) 0%, rgba(160,107,255,.08) 35%, transparent 65%); pointer-events: none; z-index: 5; mix-blend-mode: screen; transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s ease; will-change: transform, opacity; filter: blur(8px); } .cursor-glow.is-active{ opacity: 1; } @media (hover: none){ .cursor-glow{ display: none; } } /* ===== 6 · Reduced motion fallback ===== */ @media (prefers-reduced-motion: reduce){ .orb, .grid, .hero-title, .hero-title .line{ transition: none !important; transform: none !important; } .cursor-glow{ display: none; } .hero-title .reveal-word{ opacity: 1; filter: none; transform: none; } } /* ============================================================ AI CHATBOT WIDGET · floating bottom-right ============================================================ */ .chatbot{ position:fixed; right:24px; bottom:24px; z-index:9999; font-family:var(--font-sans); --cb-w: 380px; --cb-h: 580px; transition:transform .35s cubic-bezier(.2,.7,.1,1), opacity .25s ease; } /* Ducked state: when a section's primary CTA is in viewport on mobile, slide the bubble out of the way so it doesn't cover taps. */ .chatbot.is-ducked{ transform:translateY(120%); opacity:0;pointer-events:none; } .chatbot.is-open.is-ducked{ transform:none;opacity:1;pointer-events:auto; } /* Toggle pill button */ .chatbot-toggle{ position:relative; width:64px; height:64px; border-radius:50%; background:var(--grad); color:#06080f; display:grid; place-items:center; cursor:pointer; box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 18px 50px -10px rgba(122,107,255,.6), 0 4px 16px rgba(0,0,0,.4); transition:transform .25s cubic-bezier(.2,.7,.1,1), box-shadow .25s ease; } .chatbot-toggle:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 0 0 1px rgba(255,255,255,.32) inset, 0 24px 60px -10px rgba(122,107,255,.8), 0 6px 20px rgba(0,0,0,.5); } .chatbot-toggle::before{ content:""; position:absolute; inset:-6px; border-radius:50%; background:var(--grad); filter:blur(14px); opacity:.55; z-index:-1; animation:chatbotPulse 2.6s ease-in-out infinite; } @keyframes chatbotPulse{ 0%,100%{opacity:.4} 50%{opacity:.7} } .chatbot-toggle-icon{ position:absolute; transition:opacity .2s ease, transform .25s ease } .chatbot-icon-close{ opacity:0; transform:rotate(-30deg) scale(.7) } .chatbot.is-open .chatbot-icon-chat{ opacity:0; transform:rotate(30deg) scale(.7) } .chatbot.is-open .chatbot-icon-close{ opacity:1; transform:rotate(0) scale(1) } /* Panel — hidden by default, slides up when open */ .chatbot-panel{ position:absolute; right:0; bottom:80px; width:var(--cb-w); height:var(--cb-h); max-height:calc(100dvh - 120px); background:linear-gradient(165deg, rgba(11,15,26,.96), rgba(8,12,22,.96)); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border:1px solid rgba(34,233,255,.22); border-radius:24px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(122,107,255,.18) inset; opacity:0; transform:translateY(20px) scale(.97); pointer-events:none; transition:opacity .25s cubic-bezier(.2,.7,.1,1), transform .25s cubic-bezier(.2,.7,.1,1); } .chatbot.is-open .chatbot-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto } .chatbot.is-open{ aria-hidden:false } /* Header */ .chatbot-head{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg, rgba(34,233,255,.05), transparent); } .chatbot-head-avatar{ position:relative; width:44px; height:44px; border-radius:50%; background:rgba(34,233,255,.1); display:grid; place-items:center; flex:none; } .chatbot-head-avatar img{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(34,233,255,.5)) } .chatbot-pulse{ position:absolute; inset:-2px; border-radius:50%; border:1.5px solid var(--cyan); animation:chatbotRingPulse 2.4s ease-in-out infinite; opacity:.6; } @keyframes chatbotRingPulse{ 0%,100%{ transform:scale(1); opacity:.6 } 50% { transform:scale(1.1); opacity:0 } } .chatbot-head-meta{ flex:1; min-width:0 } .chatbot-head-meta strong{ display:block; font-family:var(--font-display); font-weight:600; font-size:.98rem; color:#fff; line-height:1.2 } .chatbot-head-meta span{ display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--text-mute); margin-top:2px } .chatbot-status-dot{ width:6px; height:6px; border-radius:50%; background:#22e9a7; box-shadow:0 0 8px #22e9a7 } .chatbot-close{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--text-mute); transition:background .2s ease, color .2s ease; } .chatbot-close:hover{ background:rgba(255,255,255,.06); color:#fff } /* Message log */ .chatbot-log{ flex:1; overflow-y:auto; overflow-x:hidden; padding:18px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; } .chatbot-log::-webkit-scrollbar{ width:6px } .chatbot-log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:3px } .chatbot-msg{ max-width:82%; padding:10px 14px; border-radius:16px; font-size:.92rem; line-height:1.5; word-wrap:break-word; white-space:pre-wrap; animation:chatbotMsgIn .3s cubic-bezier(.2,.7,.1,1) both; } @keyframes chatbotMsgIn{ from{ opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } } .chatbot-msg.bot{ align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); color:#eaf2ff; border-bottom-left-radius:6px; } .chatbot-msg.user{ align-self:flex-end; background:var(--grad); color:#06080f; font-weight:500; border-bottom-right-radius:6px; box-shadow:0 6px 18px -8px rgba(122,107,255,.5); } .chatbot-msg.error{ align-self:flex-start; background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.2); color:#ffd6d6; border-bottom-left-radius:6px; } .chatbot-typing{ align-self:flex-start; display:inline-flex; gap:4px; align-items:center; padding:14px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); border-radius:16px; border-bottom-left-radius:6px; } .chatbot-typing span{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:chatbotDotBounce 1.2s ease-in-out infinite; } .chatbot-typing span:nth-child(2){ animation-delay:.15s } .chatbot-typing span:nth-child(3){ animation-delay:.3s } @keyframes chatbotDotBounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-5px); opacity:1 } } /* Suggestion chips */ .chatbot-suggestions{ display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 12px; } .chatbot-suggestion{ padding:7px 12px; border:1px solid rgba(34,233,255,.25); border-radius:999px; background:rgba(34,233,255,.05); color:#cfeefa; font-size:.78rem; cursor:pointer; transition:background .2s ease, border-color .2s ease; } .chatbot-suggestion:hover{ background:rgba(34,233,255,.12); border-color:rgba(34,233,255,.45) } /* Input */ .chatbot-input{ display:flex; gap:8px; align-items:flex-end; padding:12px 14px; border-top:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); } .chatbot-input textarea{ flex:1; background:transparent; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 14px; color:#fff; font-family:inherit; font-size:.92rem; line-height:1.4; resize:none; max-height:120px; outline:none; transition:border-color .2s ease, background .2s ease; } .chatbot-input textarea::placeholder{ color:var(--text-mute) } .chatbot-input textarea:focus{ border-color:rgba(34,233,255,.5); background:rgba(34,233,255,.04) } .chatbot-input button{ width:40px; height:40px; border-radius:12px; flex:none; background:var(--grad); color:#06080f; display:grid; place-items:center; cursor:pointer; transition:transform .2s ease, filter .2s ease, opacity .2s ease; box-shadow:0 8px 22px -10px rgba(122,107,255,.5); } .chatbot-input button:hover:not(:disabled){ transform:translateY(-1px); filter:brightness(1.08) } .chatbot-input button:disabled{ opacity:.45; cursor:not-allowed } .chatbot-foot{ text-align:center; font-size:.7rem; color:var(--text-mute); padding:6px 14px 12px; margin:0; } /* Mobile — full-screen panel */ @media (max-width:520px){ .chatbot{ right:16px; bottom:16px } .chatbot-panel{ --cb-w: calc(100vw - 32px); --cb-h: calc(100dvh - 110px); right:0; bottom:80px; } } /* ============================================================ Booking Modal — opens via [data-booking-open] ============================================================ */ .booking-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; } .booking-modal.is-open{ opacity:1; visibility:visible } .booking-backdrop{ position:absolute; inset:0; background:rgba(3,5,12,.94); backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%); } /* Hintergrund-Effekte komplett still, damit nichts durchscheint */ body.booking-open .divider, body.booking-open .ambient, body.booking-open .cursor-glow{ visibility:hidden } .booking-dialog{ position:relative; width:min(560px, 100%); max-height:calc(100dvh - 48px); overflow-y:auto; overflow-x:hidden; padding:clamp(28px,4vw,44px); border-radius:var(--radius-l); background:#0a0f1c; border:1px solid rgba(255,255,255,.10); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); transform:translateY(18px) scale(.98); transition:transform .4s cubic-bezier(.22,.61,.36,1); /* Scrollbar visuell unsichtbar — Inhalt bleibt scrollbar */ scrollbar-width:none; -ms-overflow-style:none; } .booking-dialog::-webkit-scrollbar{ width:0; height:0; display:none } /* (Dialog-Gradient-Ring entfernt — verursachte auf manchen Browsern eine Linie quer über die Form) */ .booking-modal.is-open .booking-dialog{ transform:translateY(0) scale(1) } .booking-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--text-mute); background:rgba(255,255,255,.04); border:1px solid var(--border); transition:color .25s, background .25s, border-color .25s, transform .25s; } .booking-close:hover{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(34,233,255,.4); transform:rotate(90deg) } .booking-head{ text-align:center; margin-bottom:24px } .booking-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:14px; } .booking-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:bookingPulse 1.8s ease-in-out infinite; } @keyframes bookingPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} } .booking-head h2{ font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:10px } .booking-head p{ font-size:.95rem; max-width:420px; margin:0 auto } .booking-form{ display:flex; flex-direction:column; gap:16px } .booking-field{ display:flex; flex-direction:column; gap:6px } .booking-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px } @media (max-width:480px){ .booking-row{ grid-template-columns:1fr } } .booking-label{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); font-weight:600; } .booking-label em{ color:var(--cyan); font-style:normal; margin-left:2px } .booking-field input, .booking-field textarea{ width:100%; padding:13px 16px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; font-family:inherit; font-size:.95rem; color:var(--text); transition:border-color .25s, background .25s, box-shadow .25s; resize:vertical; /* Browser-Defaults killen — keine Autofill-Streifen, keine Inner-Linien, kein Focus-Outline-Strich */ -webkit-appearance:none; appearance:none; outline:none; text-decoration:none; background-image:none; caret-color:var(--cyan); box-shadow:none; } .booking-field textarea{ resize:none; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; } .booking-field textarea::-webkit-scrollbar{ width:0; height:0; display:none } .booking-field textarea::-webkit-resizer{ display:none } /* Chrome Autofill-Hintergrund wegnehmen (gelblicher Streifen) */ .booking-field input:-webkit-autofill, .booking-field textarea:-webkit-autofill{ -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.04) inset; caret-color:var(--cyan); transition:background-color 9999s ease-in-out 0s; } .booking-field input::placeholder, .booking-field textarea::placeholder{ color:rgba(152,163,184,.55) } .booking-field input:focus, .booking-field textarea:focus{ outline:none; border-color:rgba(34,233,255,.55); background:rgba(255,255,255,.06); box-shadow:0 0 0 4px rgba(34,233,255,.10); } .booking-field input:invalid:not(:placeholder-shown), .booking-field.has-error input, .booking-field.has-error textarea{ border-color:rgba(255,90,120,.55); box-shadow:0 0 0 4px rgba(255,90,120,.10); } .booking-hint{ font-size:.78rem; color:var(--text-mute); margin-top:2px; } .booking-status{ min-height:0; font-size:.9rem; line-height:1.45; padding:0 2px; color:var(--text-mute); } .booking-status.is-error{ color:#ff7a8a } .booking-status.is-success{ color:#5fe2a3 } .booking-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; } .booking-actions .btn{ flex:1 1 180px; justify-content:center } .booking-submit[disabled]{ opacity:.6; cursor:not-allowed } .booking-foot{ font-size:.78rem; color:var(--text-mute); text-align:center; margin-top:6px; line-height:1.5; } body.booking-open{ overflow:hidden } /* Success state — replaces form */ .booking-form.is-success > *:not(.booking-status){ display:none } .booking-form.is-success .booking-status{ text-align:center; padding:30px 0; font-size:1.05rem; color:#5fe2a3; } /* Mobile — kompaktes Layout, alles passt ohne Scrollen */ @media (max-width:560px){ .booking-modal{ padding:12px } .booking-dialog{ padding:22px 20px 20px; max-height:calc(100dvh - 24px); border-radius:22px; } .booking-close{ top:10px; right:10px; width:34px; height:34px } .booking-head{ margin-bottom:18px } .booking-head h2{ font-size:1.4rem; margin-bottom:8px } .booking-head p{ font-size:.88rem } .booking-eyebrow{ font-size:.7rem; margin-bottom:10px } .booking-form{ gap:12px } .booking-field input, .booking-field textarea{ padding:11px 14px; font-size:.92rem } .booking-field textarea{ min-height:88px } .booking-label{ font-size:.72rem } .booking-hint{ font-size:.72rem } .booking-actions{ gap:10px; margin-top:4px } .booking-actions .btn{ flex:1 1 100%; padding:13px 18px } .booking-foot{ font-size:.72rem } } /* Sehr kleine Phones — Textarea noch kompakter */ @media (max-width:380px){ .booking-dialog{ padding:20px 16px 18px } .booking-field textarea{ min-height:72px } } /* ============================================================ MOBILE: Tighter Pin-Runways → keine toten Leerstellen ============================================================ */ @media (max-width: 780px){ /* MORPH: deutlich langsamer Word-Swap — Schnell-Scroll wischt nicht durch */ .morph{ height: 780vh; } /* PROCESS: längerer Runway → 4 Phasen wechseln langsamer beim Scrollen. (Padding / Rail-Position siehe Process-Block weiter oben.) */ .process-stage{ height: 600vh; } .phases{ height: 72vh; } /* SERVICES Stage: 43-Frame Bild-Animation bleibt unverändert — ihre Geschwindigkeit ist gut so, nur Schrift-Animationen wurden verlangsamt. */ .services-stage{ height: 360vh; } /* RISK-FREE pin ist auf mobile bereits static (siehe @640px), hier nur dafür sorgen, dass kein extra leeres Bottom-Padding bleibt. */ .risk-free-pin{ padding-bottom: 0; } } /* Mobile <=640px: Schrift-Animationen noch ruhiger lesbar machen, speziell auf dem Handy ging es vorher deutlich zu schnell durch. */ @media (max-width: 640px){ .morph{ height: 720vh; padding-bottom: 0; } .process-stage{ height: 580vh; } .process{ padding-bottom: 60px; } hr.divider{ margin-block: 0; } /* Ticker direkt an Hero ankleben — keine 20px-Lücke */ .ticker{ margin-top: 0; } } /* ============================================================ FAQ Section · Native
accordion in dark theme ============================================================ */ .faq{ position:relative; padding:clamp(80px, 10vw, 140px) var(--pad-x); max-width:1100px; margin:0 auto; } .faq-head{ text-align:center; max-width:760px; margin:0 auto clamp(40px, 5vw, 64px); } .faq-head .eyebrow{ margin-bottom:18px; } .faq-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.05; letter-spacing:-.025em; color:#fff; margin-bottom:18px; } .faq-head p{ color:var(--text-mute); font-size:clamp(.95rem, 1.1vw, 1.05rem); line-height:1.55; } .faq-list{ display:flex; flex-direction:column; gap:14px; } .faq-item{ position:relative; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); backdrop-filter:blur(8px); overflow:hidden; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .faq-item:hover{ border-color:rgba(34,233,255,.35); transform:translateY(-2px); box-shadow:0 16px 40px -20px rgba(122,107,255,.4); } .faq-item[open]{ border-color:rgba(122,107,255,.45); background:linear-gradient(180deg, rgba(34,233,255,.05), rgba(160,107,255,.03)); } .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; font-family:var(--font-display); font-weight:600; font-size:clamp(1rem, 1.3vw, 1.15rem); color:#fff; cursor:pointer; list-style:none; user-select:none; -webkit-tap-highlight-color:transparent; } .faq-item summary::-webkit-details-marker{ display:none } .faq-item summary::marker{ content:"" } .faq-arrow{ position:relative; width:24px; height:24px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.06); transition:background .25s ease, transform .35s cubic-bezier(.2,.7,.1,1); } .faq-arrow::before, .faq-arrow::after{ content:""; position:absolute; top:50%; left:50%; width:10px; height:1.6px; background:#fff; transform-origin:center; transition:transform .35s cubic-bezier(.2,.7,.1,1), background .25s ease; } .faq-arrow::before{ transform:translate(-50%, -50%); } .faq-arrow::after{ transform:translate(-50%, -50%) rotate(90deg); } .faq-item[open] .faq-arrow{ background:linear-gradient(135deg, rgba(34,233,255,.3), rgba(160,107,255,.3)); } .faq-item[open] .faq-arrow::after{ transform:translate(-50%, -50%) rotate(0deg); } .faq-body{ padding:0 26px 24px; color:var(--text-mute); line-height:1.6; font-size:clamp(.95rem, 1.05vw, 1rem); animation:faqFadeIn .35s ease; } .faq-body p{ margin:0; } .faq-body strong{ color:#fff; font-weight:600; } @keyframes faqFadeIn{ from{ opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } @media (max-width:640px){ .faq{ padding:clamp(60px, 12vw, 100px) var(--pad-x); } .faq-item summary{ padding:18px 20px; gap:14px; font-size:1rem; } .faq-body{ padding:0 20px 20px; } } /* ============================================================ REFERENCE Section · Erster Kunde / Trust-Signal ============================================================ */ .reference{ position:relative; padding:clamp(80px, 10vw, 140px) var(--pad-x); max-width:1200px; margin:0 auto; } .reference-head{ text-align:center; max-width:760px; margin:0 auto clamp(48px, 6vw, 72px); } .reference-head .eyebrow{ margin-bottom:18px; } .reference-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.05; letter-spacing:-.025em; color:#fff; margin-bottom:18px; } .reference-head p{ color:var(--text-mute); font-size:clamp(.95rem, 1.1vw, 1.05rem); line-height:1.65; } .reference-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:20px; } .reference-frame{ position:relative; width:100%; max-width:720px; border-radius:24px; overflow:hidden; background:linear-gradient(135deg, rgba(34,233,255,.12), rgba(160,107,255,.12)); padding:1px; box-shadow: 0 40px 100px -40px rgba(122,107,255,.4), 0 20px 60px -30px rgba(34,233,255,.2); } .reference-frame::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(34,233,255,.5), rgba(160,107,255,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .reference-frame img{ display:block; width:100%; height:auto; border-radius:23px; object-fit:cover; } .reference-figure figcaption{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; max-width:600px; } .reference-caption-meta{ font-family:var(--font-mono, var(--font-sans)); font-size:.78rem; letter-spacing:.25em; text-transform:uppercase; color:var(--cyan); opacity:.85; } .reference-caption-text{ font-size:.95rem; color:var(--text-mute); line-height:1.55; } @media (max-width:640px){ .reference{ padding:clamp(60px, 12vw, 100px) var(--pad-x); } .reference-frame{ border-radius:18px; } .reference-frame img{ border-radius:17px; } }