/* Praxoria Startseite – v636: Zertifikatsfluss als hochwertige visuelle Bühne. Aufbau auf v635, ohne JavaScript und ohne Eingriff in die Transferanimation. */ body.homeRefinedV636{ --cert-v636-blue: var(--accent, #45a8cc); --cert-v636-green: var(--accent3, #8fb55a); --cert-v636-gold: var(--accent2, #d2a544); --cert-v636-ink: color-mix(in oklab, var(--text) 92%, #0f172a 8%); --cert-v636-muted: color-mix(in oklab, var(--text) 62%, var(--muted)); --cert-v636-rule: color-mix(in oklab, var(--border) 46%, transparent); --cert-v636-rule-soft: color-mix(in oklab, var(--border) 28%, transparent); } html body.home.homeRefinedV636 .band.startBand.certFlowSection{ position: relative !important; isolation: isolate !important; margin: clamp(64px, 7vw, 124px) 0 0 !important; padding: clamp(70px, 7vw, 118px) 0 clamp(68px, 7vw, 122px) !important; background: radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--cert-v636-blue) 18%, transparent), transparent 32%), radial-gradient(circle at 76% 12%, color-mix(in oklab, var(--cert-v636-gold) 15%, transparent), transparent 32%), radial-gradient(circle at 48% 94%, color-mix(in oklab, var(--cert-v636-green) 12%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in oklab, var(--panel) 20%, transparent), color-mix(in oklab, var(--surface) 16%, transparent) 54%, transparent 100%) !important; } html body.home.homeRefinedV636 .band.startBand.certFlowSection::before{ height: 2px !important; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--cert-v636-blue) 56%, transparent), color-mix(in oklab, var(--cert-v636-green) 48%, transparent), color-mix(in oklab, var(--cert-v636-gold) 56%, transparent), transparent) !important; opacity: .86 !important; } html body.home.homeRefinedV636 .certFlowIntro{ grid-template-columns: minmax(0, .82fr) minmax(360px, .92fr) !important; gap: clamp(18px, 3vw, 38px) clamp(54px, 7vw, 128px) !important; margin-bottom: clamp(38px, 5vw, 72px) !important; } html body.home.homeRefinedV636 .certFlowIntro h2{ max-width: 12.4ch !important; font-size: clamp(3.25rem, 5.35vw, 6.35rem) !important; line-height: .9 !important; letter-spacing: -.083em !important; } html body.home.homeRefinedV636 .certFlowIntro h2::after{ width: min(100%, 24rem) !important; height: 4px !important; margin-top: clamp(20px, 2.2vw, 30px) !important; background: linear-gradient(90deg, var(--cert-v636-blue), var(--cert-v636-green), var(--cert-v636-gold), transparent 94%) !important; opacity: .66 !important; } html body.home.homeRefinedV636 .certFlowIntro p{ max-width: 58ch !important; font-size: clamp(1.1rem, 1.34vw, 1.42rem) !important; line-height: 1.64 !important; color: color-mix(in oklab, var(--text) 78%, var(--muted)) !important; } /* Große Bühne: stärker wie eine kuratierte Produktvisualisierung statt wie eine Timeline. */ html body.home.homeRefinedV636 .certFlowExperienceV635.certFlowExperienceV636{ min-height: clamp(520px, 43vw, 675px) !important; margin: 0 0 clamp(24px, 3vw, 42px) !important; border-radius: clamp(34px, 3.4vw, 56px) !important; border: 1px solid color-mix(in oklab, var(--border) 42%, rgba(255,255,255,.64)) !important; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.44) 42%, rgba(255,255,255,.28)), radial-gradient(circle at 20% 18%, color-mix(in oklab, var(--cert-v636-blue) 18%, transparent), transparent 38%), radial-gradient(circle at 77% 20%, color-mix(in oklab, var(--cert-v636-gold) 17%, transparent), transparent 34%), radial-gradient(circle at 52% 82%, color-mix(in oklab, var(--cert-v636-green) 13%, transparent), transparent 40%), color-mix(in oklab, var(--panel) 74%, transparent) !important; box-shadow: 0 58px 130px rgba(15, 30, 46, .14), 0 18px 44px rgba(15, 30, 46, .08), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.44) !important; overflow: hidden !important; transform: translateZ(0) !important; } html body.home.homeRefinedV636 .certFlowExperienceV636::before{ inset: clamp(18px, 2.2vw, 32px) !important; border-radius: clamp(24px, 2.6vw, 42px) !important; border: 1px solid color-mix(in oklab, var(--border) 30%, rgba(255,255,255,.62)) !important; background: linear-gradient(90deg, rgba(255,255,255,.24), transparent 16%, transparent 84%, rgba(255,255,255,.18)), linear-gradient(180deg, rgba(255,255,255,.22), transparent 40%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important; } html body.home.homeRefinedV636 .certFlowExperienceV636::after{ left: clamp(36px, 5vw, 84px) !important; right: clamp(36px, 5vw, 84px) !important; bottom: clamp(42px, 4vw, 70px) !important; height: 20px !important; border-radius: 999px !important; background: radial-gradient(ellipse at center, rgba(15,30,46,.18), transparent 70%) !important; filter: blur(14px) !important; opacity: .46 !important; } html body.home.homeRefinedV636 .certFlowAuroraV636, html body.home.homeRefinedV636 .certFlowGridV636, html body.home.homeRefinedV636 .certFlowOrbitV636, html body.home.homeRefinedV636 .certFlowStageTitleV636, html body.home.homeRefinedV636 .certFlowRibbonV636, html body.home.homeRefinedV636 .certPremiumCaptionV636{ position: absolute; pointer-events: none; } html body.home.homeRefinedV636 .certFlowAuroraV636{ inset: -28% -10% auto -10%; height: 72%; background: conic-gradient(from 204deg at 50% 56%, transparent 0deg, color-mix(in oklab, var(--cert-v636-blue) 14%, transparent) 58deg, transparent 122deg, color-mix(in oklab, var(--cert-v636-green) 12%, transparent) 188deg, color-mix(in oklab, var(--cert-v636-gold) 13%, transparent) 252deg, transparent 312deg), radial-gradient(circle at 54% 45%, rgba(255,255,255,.42), transparent 42%); filter: blur(26px) saturate(1.18); opacity: .82; transform: rotate(-2deg); } html body.home.homeRefinedV636 .certFlowGridV636{ inset: 0; background: linear-gradient(color-mix(in oklab, var(--border) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--border) 16%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at 50% 42%, black 0%, rgba(0,0,0,.48) 44%, transparent 82%); opacity: .42; } html body.home.homeRefinedV636 .certFlowStageTitleV636{ z-index: 5; left: clamp(34px, 4vw, 64px); top: clamp(28px, 3vw, 52px); padding: .55rem .78rem .58rem; border: 1px solid color-mix(in oklab, var(--border) 32%, transparent); border-radius: 999px; background: rgba(255,255,255,.58); color: color-mix(in oklab, var(--text) 66%, var(--muted)); font-size: .73rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 28px rgba(15,30,46,.06), inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html body.home.homeRefinedV636 .certFlowPathV635{ z-index: 1 !important; left: 4.2% !important; right: 4.2% !important; top: 18% !important; height: 58% !important; opacity: .8 !important; filter: drop-shadow(0 22px 24px rgba(22, 48, 76, .08)) !important; } html body.home.homeRefinedV636 .certFlowPathShadowV635{ stroke-width: 30 !important; opacity: .18 !important; } html body.home.homeRefinedV636 .certFlowPathLineV635{ stroke-width: 7 !important; opacity: .84 !important; filter: url(#certFlowPathGlowV635) !important; } html body.home.homeRefinedV636 .certFlowOrbitV636{ z-index: 2; left: 7%; right: 6%; top: 15%; height: 58%; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--cert-v636-blue) 18%, transparent); transform: rotate(-5deg); opacity: .46; mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent); } html body.home.homeRefinedV636 .certFlowOrbitV636 span{ position:absolute; width: 8px; height: 8px; border-radius:999px; background: color-mix(in oklab, var(--cert-v636-gold) 68%, white); box-shadow: 0 0 0 8px color-mix(in oklab, var(--cert-v636-gold) 16%, transparent), 0 10px 24px rgba(131, 97, 20, .18); } html body.home.homeRefinedV636 .certFlowOrbitV636 span:nth-child(1){ left: 16%; top: 18%; } html body.home.homeRefinedV636 .certFlowOrbitV636 span:nth-child(2){ left: 52%; top: 78%; background: color-mix(in oklab, var(--cert-v636-green) 70%, white); } html body.home.homeRefinedV636 .certFlowOrbitV636 span:nth-child(3){ right: 12%; top: 30%; } html body.home.homeRefinedV636 .certFlowRibbonV636{ z-index: 6; left: clamp(34px, 4vw, 64px); right: clamp(34px, 4vw, 64px); bottom: clamp(26px, 3vw, 50px); display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: clamp(8px, 1vw, 14px); color: color-mix(in oklab, var(--text) 58%, var(--muted)); font-size: .73rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } html body.home.homeRefinedV636 .certFlowRibbonV636 span{ padding: .48rem .62rem .52rem; border: 1px solid color-mix(in oklab, var(--border) 28%, transparent); border-radius: 999px; background: rgba(255,255,255,.56); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } html body.home.homeRefinedV636 .certFlowRibbonV636 i{ height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border) 54%, transparent), transparent); } html body.home.homeRefinedV636 .certVisualPanelV635{ z-index: 4 !important; border: 1px solid color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 26%, rgba(255,255,255,.72)) !important; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.54) 56%, rgba(255,255,255,.42)), color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 5%, var(--surface) 72%) !important; box-shadow: 0 30px 72px rgba(15,30,46,.15), 0 10px 26px rgba(15,30,46,.08), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.42) !important; backdrop-filter: blur(18px) saturate(1.14) !important; -webkit-backdrop-filter: blur(18px) saturate(1.14) !important; } html body.home.homeRefinedV636 .certVisualPanelV635::before{ opacity: .94 !important; background: radial-gradient(circle at 18% 0%, color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 16%, transparent), transparent 54%) !important; } html body.home.homeRefinedV636 .certVisualPanelV635::after{ content:""; position:absolute; left: 22px; right: 22px; bottom: -18px; height: 22px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(15,30,46,.22), transparent 72%); filter: blur(12px); opacity: .32; } html body.home.homeRefinedV636 .certVisualCourseV635{ --panel-accent: var(--cert-v636-blue); left: 7.6% !important; top: 25% !important; width: clamp(210px, 19vw, 274px) !important; min-height: clamp(170px, 15vw, 214px) !important; transform: rotate(-4deg) !important; } html body.home.homeRefinedV636 .certVisualAccessV635{ --panel-accent: var(--cert-v636-green); left: 31% !important; top: 45% !important; width: clamp(190px, 17vw, 240px) !important; min-height: clamp(142px, 12vw, 174px) !important; transform: rotate(2deg) !important; } html body.home.homeRefinedV636 .certVisualCockpitV635{ --panel-accent: var(--cert-v636-green); left: 48.8% !important; top: 21% !important; width: clamp(250px, 23vw, 338px) !important; min-height: clamp(218px, 18vw, 274px) !important; transform: rotate(-1.4deg) !important; } html body.home.homeRefinedV636 .certVisualCertificateV635{ --panel-accent: var(--cert-v636-gold); right: 7.2% !important; top: 13% !important; width: clamp(240px, 22vw, 318px) !important; min-height: clamp(318px, 27vw, 420px) !important; padding: clamp(26px, 2.8vw, 38px) !important; transform: rotate(3.4deg) !important; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72) 58%, rgba(255,255,255,.56)), radial-gradient(circle at 78% 18%, color-mix(in oklab, var(--cert-v636-gold) 14%, transparent), transparent 46%), color-mix(in oklab, var(--surface) 88%, white) !important; box-shadow: 0 44px 92px rgba(92, 72, 25, .18), 0 18px 38px rgba(15,30,46,.10), inset 0 1px 0 rgba(255,255,255,.96) !important; } html body.home.homeRefinedV636 .certPanelLabelV635{ color: color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 74%, var(--text)) !important; font-size: .69rem !important; letter-spacing: .16em !important; } html body.home.homeRefinedV636 .certVisualPanelV635 strong{ color: var(--cert-v636-ink) !important; letter-spacing: -.045em !important; } html body.home.homeRefinedV636 .certVisualCourseV635 strong, html body.home.homeRefinedV636 .certVisualCockpitV635 strong, html body.home.homeRefinedV636 .certVisualCertificateV635 strong{ font-size: clamp(1.18rem, 1.32vw, 1.52rem) !important; } html body.home.homeRefinedV636 .certPanelRowsV635 i{ height: 9px !important; border-radius: 999px !important; background: linear-gradient(90deg, color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 24%, rgba(255,255,255,.68)), rgba(255,255,255,.58)) !important; } html body.home.homeRefinedV636 .certPanelChipV635, html body.home.homeRefinedV636 .certVerifyV635, html body.home.homeRefinedV636 .certUnlockV635{ border-color: color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 24%, var(--border)) !important; background: color-mix(in oklab, var(--panel-accent, var(--cert-v636-blue)) 8%, rgba(255,255,255,.62)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important; } html body.home.homeRefinedV636 .certMiniMapV636{ display:flex; gap: 7px; margin-top: 16px; } html body.home.homeRefinedV636 .certMiniMapV636 span{ width: 30px; height: 30px; border-radius: 11px; background: linear-gradient(180deg, rgba(255,255,255,.64), color-mix(in oklab, var(--cert-v636-blue) 9%, transparent)); border: 1px solid color-mix(in oklab, var(--cert-v636-blue) 20%, var(--border)); box-shadow: inset 0 1px 0 rgba(255,255,255,.76); } html body.home.homeRefinedV636 .certMiniMapV636 span:nth-child(2){ background: linear-gradient(180deg, rgba(255,255,255,.64), color-mix(in oklab, var(--cert-v636-green) 9%, transparent)); } html body.home.homeRefinedV636 .certMiniMapV636 span:nth-child(3){ background: linear-gradient(180deg, rgba(255,255,255,.64), color-mix(in oklab, var(--cert-v636-gold) 9%, transparent)); } html body.home.homeRefinedV636 .certCodeV635{ margin-top: 18px !important; gap: 8px !important; } html body.home.homeRefinedV636 .certCodeV635 b{ width: 39px !important; height: 48px !important; border-radius: 15px !important; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)), color-mix(in oklab, var(--cert-v636-green) 10%, transparent) !important; box-shadow: 0 10px 20px rgba(42,74,46,.10), inset 0 1px 0 rgba(255,255,255,.78) !important; } html body.home.homeRefinedV636 .certAccessPulseV636{ position:absolute; right: 22px; top: 24px; width: 42px; height: 42px; border-radius: 999px; background: radial-gradient(circle, color-mix(in oklab, var(--cert-v636-green) 56%, white) 0 30%, color-mix(in oklab, var(--cert-v636-green) 18%, transparent) 31% 100%); box-shadow: 0 0 0 10px color-mix(in oklab, var(--cert-v636-green) 10%, transparent), 0 18px 32px rgba(60,92,40,.14); } html body.home.homeRefinedV636 .certProgressStackV635 span{ border-color: color-mix(in oklab, var(--cert-v636-green) 18%, var(--border)) !important; background: rgba(255,255,255,.54) !important; } html body.home.homeRefinedV636 .certProgressStackV635 span::after{ content:""; display:block; height: 8px; width: 58%; border-radius: 999px; background: color-mix(in oklab, var(--cert-v636-green) 18%, transparent); } html body.home.homeRefinedV636 .certCockpitChecksV636{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 15px; font-size: .63rem; font-weight: 850; color: color-mix(in oklab, var(--text) 56%, var(--muted)); } html body.home.homeRefinedV636 .certCockpitChecksV636 span{ padding: .43rem .38rem; text-align:center; border-radius: 999px; background: rgba(255,255,255,.52); border: 1px solid color-mix(in oklab, var(--border) 24%, transparent); } html body.home.homeRefinedV636 .certMarkV635{ right: 24px !important; top: 24px !important; width: 48px !important; height: 48px !important; background: linear-gradient(135deg, color-mix(in oklab, var(--cert-v636-gold) 68%, white), color-mix(in oklab, var(--cert-v636-gold) 78%, #87651c)) !important; box-shadow: 0 18px 36px rgba(112,83,24,.22), inset 0 1px 0 rgba(255,255,255,.58) !important; } html body.home.homeRefinedV636 .certPaperLinesV635{ margin-top: 24px !important; gap: 10px !important; } html body.home.homeRefinedV636 .certPaperLinesV635 i{ height: 10px !important; background: linear-gradient(90deg, color-mix(in oklab, var(--cert-v636-gold) 18%, rgba(255,255,255,.76)), rgba(255,255,255,.5)) !important; } html body.home.homeRefinedV636 .certSealV635{ right: 30px !important; bottom: 78px !important; width: 78px !important; height: 78px !important; background: repeating-conic-gradient(from 4deg, color-mix(in oklab, var(--cert-v636-gold) 72%, white) 0deg 7deg, color-mix(in oklab, var(--cert-v636-gold) 36%, white) 7deg 14deg) !important; box-shadow: 0 22px 42px rgba(107,83,27,.18), inset 0 0 0 1px color-mix(in oklab, var(--cert-v636-gold) 54%, rgba(255,255,255,.8)) !important; } html body.home.homeRefinedV636 .certQrV636{ position:absolute; left: 30px; bottom: 82px; width: 74px; height: 74px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.62); border: 1px solid color-mix(in oklab, var(--border) 32%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); } html body.home.homeRefinedV636 .certQrV636 i{ border-radius: 5px; background: color-mix(in oklab, var(--cert-v636-ink) 54%, transparent); opacity: .62; } html body.home.homeRefinedV636 .certQrV636 i:nth-child(2), html body.home.homeRefinedV636 .certQrV636 i:nth-child(4), html body.home.homeRefinedV636 .certQrV636 i:nth-child(8){ opacity: .18; } html body.home.homeRefinedV636 .certSignatureV636{ position:absolute; left: 30px; right: 116px; bottom: 48px; height: 13px; border-bottom: 2px solid color-mix(in oklab, var(--cert-v636-gold) 30%, var(--border)); } html body.home.homeRefinedV636 .certSignatureV636::before{ content:""; position:absolute; left: 2px; bottom: 1px; width: 64px; height: 20px; border-bottom: 2px solid color-mix(in oklab, var(--cert-v636-gold) 55%, var(--text)); border-radius: 50%; transform: rotate(-6deg); opacity: .36; } html body.home.homeRefinedV636 .certFlowNodeV635{ z-index: 7 !important; width: 52px !important; height: 52px !important; background: rgba(255,255,255,.84) !important; box-shadow: 0 20px 42px rgba(15,30,46,.14), inset 0 1px 0 rgba(255,255,255,.92) !important; } html body.home.homeRefinedV636 .certFlowNodeV635.n1{ left: 23% !important; top: 43% !important; } html body.home.homeRefinedV636 .certFlowNodeV635.n2{ left: 45% !important; top: 57% !important; } html body.home.homeRefinedV636 .certFlowNodeV635.n3{ right: 28% !important; top: 40% !important; } html body.home.homeRefinedV636 .certPremiumCaptionV636{ z-index: 6; left: clamp(36px, 4vw, 66px); bottom: clamp(80px, 6.4vw, 108px); max-width: 390px; display:grid; gap: 4px; padding: 0 0 0 18px; color: color-mix(in oklab, var(--text) 68%, var(--muted)); font-size: .94rem; line-height: 1.42; } html body.home.homeRefinedV636 .certPremiumCaptionV636::before{ content:""; position:absolute; left:0; top:3px; bottom:4px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--cert-v636-blue), var(--cert-v636-green), var(--cert-v636-gold)); } html body.home.homeRefinedV636 .certPremiumCaptionV636 b{ color: var(--cert-v636-ink); font-weight: 900; } /* Legende noch ruhiger, damit die Visualisierung die Hauptleistung trägt. */ html body.home.homeRefinedV636 .certFlowList{ gap: clamp(16px, 1.8vw, 26px) !important; } html body.home.homeRefinedV636 .certFlowItem{ border-radius: 26px !important; padding: clamp(20px, 2.2vw, 28px) !important; background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.38)), color-mix(in oklab, var(--flow-accent) 5%, var(--surface) 75%) !important; box-shadow: 0 22px 52px rgba(15,30,46,.075), inset 0 1px 0 rgba(255,255,255,.82) !important; } html body.home.homeRefinedV636 .certFlowCopy h3{ font-size: clamp(1.2rem, 1.45vw, 1.55rem) !important; } html body.home.homeRefinedV636 .certFlowCopy p{ color: color-mix(in oklab, var(--text) 68%, var(--muted)) !important; } @media (hover:hover) and (min-width: 1100px){ html body.home.homeRefinedV636 .certFlowExperienceV636:hover .certVisualCourseV635{ transform: translateY(-6px) rotate(-4.2deg) !important; } html body.home.homeRefinedV636 .certFlowExperienceV636:hover .certVisualAccessV635{ transform: translateY(-7px) rotate(2.4deg) !important; } html body.home.homeRefinedV636 .certFlowExperienceV636:hover .certVisualCockpitV635{ transform: translateY(-8px) rotate(-1.8deg) !important; } html body.home.homeRefinedV636 .certFlowExperienceV636:hover .certVisualCertificateV635{ transform: translateY(-9px) rotate(3.8deg) !important; } } @media (prefers-reduced-motion:no-preference){ html body.home.homeRefinedV636 .certFlowAuroraV636{ animation: certAuroraV636 9s ease-in-out infinite alternate; } html body.home.homeRefinedV636 .certFlowOrbitV636 span{ animation: certSparkV636 3.8s ease-in-out infinite; } html body.home.homeRefinedV636 .certFlowOrbitV636 span:nth-child(2){ animation-delay: .6s; } html body.home.homeRefinedV636 .certFlowOrbitV636 span:nth-child(3){ animation-delay: 1.2s; } html body.home.homeRefinedV636 .certAccessPulseV636{ animation: certPulseV636 3.4s ease-in-out infinite; } } @keyframes certAuroraV636{ from{ transform: rotate(-3deg) translate3d(-2%,0,0); opacity:.72; } to{ transform: rotate(2deg) translate3d(2%,1%,0); opacity:.9; } } @keyframes certSparkV636{ 0%,100%{ transform: scale(1); opacity:.58; } 50%{ transform: scale(1.34); opacity:1; } } @keyframes certPulseV636{ 0%,100%{ transform: scale(1); box-shadow: 0 0 0 9px color-mix(in oklab, var(--cert-v636-green) 10%, transparent), 0 18px 32px rgba(60,92,40,.14); } 50%{ transform: scale(1.06); box-shadow: 0 0 0 16px color-mix(in oklab, var(--cert-v636-green) 6%, transparent), 0 20px 38px rgba(60,92,40,.18); } } @media (max-width: 1180px){ html body.home.homeRefinedV636 .certFlowIntro{ grid-template-columns: 1fr !important; } html body.home.homeRefinedV636 .certFlowExperienceV635.certFlowExperienceV636{ min-height: 720px !important; } html body.home.homeRefinedV636 .certFlowRibbonV636, html body.home.homeRefinedV636 .certPremiumCaptionV636{ display:none !important; } html body.home.homeRefinedV636 .certFlowPathV635{ top: 24% !important; transform: rotate(90deg) scaleX(.78) !important; } html body.home.homeRefinedV636 .certVisualCourseV635{ left: 8% !important; top: 78px !important; } html body.home.homeRefinedV636 .certVisualAccessV635{ left:auto !important; right: 10% !important; top: 164px !important; } html body.home.homeRefinedV636 .certVisualCockpitV635{ left: 8% !important; top:auto !important; bottom: 148px !important; } html body.home.homeRefinedV636 .certVisualCertificateV635{ right: 8% !important; top:auto !important; bottom: 76px !important; } html body.home.homeRefinedV636 .certFlowNodeV635.n1{ left: 46% !important; top: 27% !important; } html body.home.homeRefinedV636 .certFlowNodeV635.n2{ left: 50% !important; top: 49% !important; } html body.home.homeRefinedV636 .certFlowNodeV635.n3{ right: 44% !important; top: 72% !important; } } @media (max-width: 720px){ html body.home.homeRefinedV636 .certFlowIntro h2{ font-size: clamp(2.55rem, 11.5vw, 3.62rem) !important; } html body.home.homeRefinedV636 .certFlowExperienceV635.certFlowExperienceV636{ min-height: auto !important; padding: 18px !important; gap: 14px !important; border-radius: 30px !important; } html body.home.homeRefinedV636 .certFlowAuroraV636, html body.home.homeRefinedV636 .certFlowGridV636, html body.home.homeRefinedV636 .certFlowStageTitleV636, html body.home.homeRefinedV636 .certFlowOrbitV636, html body.home.homeRefinedV636 .certFlowRibbonV636, html body.home.homeRefinedV636 .certPremiumCaptionV636, html body.home.homeRefinedV636 .certFlowPathV635, html body.home.homeRefinedV636 .certFlowNodeV635{ display:none !important; } html body.home.homeRefinedV636 .certVisualPanelV635{ position: relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; min-height:0 !important; transform:none !important; border-radius: 22px !important; } html body.home.homeRefinedV636 .certVisualCertificateV635{ min-height: 304px !important; } html body.home.homeRefinedV636 .certQrV636{ width: 64px; height:64px; left:24px; bottom:74px; } html body.home.homeRefinedV636 .certSealV635{ right:24px !important; bottom:74px !important; } } @media (prefers-reduced-motion: reduce){ html body.home.homeRefinedV636 .certFlowAuroraV636, html body.home.homeRefinedV636 .certFlowOrbitV636 span, html body.home.homeRefinedV636 .certAccessPulseV636{ animation: none !important; } }