/*
 * CompleteGreet Features: product-specific 3D illustration system.
 * Inspired by the perspective and layered depth of the ecommerce use-case hero.
 * No gradients. Every animation communicates the feature it belongs to.
 */

.cgf-browser-shell--3d {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 350px;
    overflow: visible;
}

.cgf-browser-shell--3d .cgf-browser-content {
    align-items: center;
    background: transparent;
    display: flex;
    justify-content: center;
    min-height: 350px;
    overflow: visible;
    padding: 0;
}

.cgf-browser-shell--3d .cgf-illustration-shell {
    align-items: center;
    background: transparent;
    display: flex;
    justify-content: center;
    min-height: 340px;
    overflow: visible;
    width: 100%;
}

.cg3d-scene {
    --cg3d-blue: #3b5dcd;
    --cg3d-blue-dark: #2948ad;
    --cg3d-blue-soft: #eaf0ff;
    --cg3d-orange: #e48333;
    --cg3d-orange-dark: #b85a12;
    --cg3d-orange-soft: #fff1e7;
    --cg3d-navy: #071426;
    --cg3d-text: #344054;
    --cg3d-muted: #667085;
    --cg3d-line: #d7dfeb;
    --cg3d-panel: #ffffff;
    --cg3d-canvas: #f4f7fb;
    align-items: center;
    aspect-ratio: 26 / 17;
    display: flex;
    justify-content: center;
    max-width: 520px;
    min-height: 320px;
    perspective: 1200px;
    position: relative;
    width: 100%;
}

.cg3d-scene *,
.cg3d-scene *::before,
.cg3d-scene *::after {
    box-sizing: border-box;
}

.cg3d-floor {
    background: rgba(7, 20, 38, 0.12);
    border-radius: 50%;
    bottom: 17px;
    filter: blur(16px);
    height: 32px;
    left: 13%;
    position: absolute;
    transform: rotateX(70deg);
    width: 74%;
}

.cg3d-object {
    height: 100%;
    position: relative;
    transform: rotateY(-11deg) rotateX(4deg) scale(0.94);
    transform-origin: center;
    transform-style: preserve-3d;
    width: 100%;
}

.cgf-feature-row:nth-child(even) .cg3d-object {
    transform: rotateY(11deg) rotateX(4deg) scale(0.94);
}

.cg3d-window,
.cg3d-card {
    background: var(--cg3d-panel);
    border: 1px solid rgba(7, 20, 38, 0.08);
    border-radius: 16px;
    box-shadow: 0 25px 50px -16px rgba(7, 20, 38, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    overflow: hidden;
    position: absolute;
    transform-style: preserve-3d;
}

.cg3d-window {
    height: 252px;
    left: 9%;
    top: 40px;
    width: 82%;
}

.cg3d-window-bar {
    align-items: center;
    background: #eef2f7;
    border-bottom: 1px solid var(--cg3d-line);
    display: flex;
    gap: 10px;
    height: 38px;
    padding: 0 12px;
}

.cg3d-dots {
    display: flex;
    gap: 5px;
}

.cg3d-dots i {
    background: #f0784d;
    border-radius: 50%;
    display: block;
    height: 8px;
    width: 8px;
}

.cg3d-dots i:nth-child(2) { background: #efbd52; }
.cg3d-dots i:nth-child(3) { background: #58c7a8; }

.cg3d-address {
    background: #ffffff;
    border-radius: 6px;
    color: #8390a4;
    display: block;
    font-size: 10px;
    line-height: 22px;
    min-width: 150px;
    padding: 0 10px;
}

.cg3d-window-body {
    height: calc(100% - 38px);
    position: relative;
}

.cg3d-video {
    background-color: #d9e2f3;
    background-image: url('/wp-content/uploads/2025/12/kvinde-forside.webp');
    background-position: center 18%;
    background-size: cover;
    border: 5px solid #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 30px -12px rgba(7, 20, 38, 0.34);
    overflow: hidden;
    position: relative;
}

.cg3d-video::after {
    background: rgba(7, 20, 38, 0.16);
    bottom: 0;
    content: '';
    height: 32%;
    left: 0;
    position: absolute;
    width: 100%;
}

.cg3d-video-person { display: none; }

.cg3d-play {
    align-items: center;
    background: #ffffff;
    border-radius: 50%;
    color: var(--cg3d-blue);
    display: flex;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    left: 50%;
    padding-left: 2px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    z-index: 2;
}

.cg3d-video small {
    background: var(--cg3d-navy);
    border-radius: 5px;
    bottom: 7px;
    color: #ffffff;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    left: 7px;
    line-height: 20px;
    padding: 0 7px;
    position: absolute;
    z-index: 3;
}

.cg3d-video--portrait { height: 198px; width: 126px; }
.cg3d-video--wide { height: 132px; width: 230px; }
.cg3d-video--round { border-radius: 50%; height: 88px; width: 88px; }
.cg3d-video--mini { border-radius: 10px; height: 92px; width: 68px; }
.cg3d-video--tile { border-radius: 9px; height: 76px; width: 108px; }

/* 01: Human Video Bubbles */
.cg3d-scene--bubble .cg3d-window { height: 240px; left: 5%; top: 49px; width: 72%; }
.cg3d-site-copy { left: 28px; position: absolute; top: 40px; width: 45%; }
.cg3d-site-copy i { background: #d9dee7; display: block; height: 9px; margin-bottom: 10px; width: 100%; }
.cg3d-site-copy i:nth-child(2) { width: 80%; }
.cg3d-site-copy i:nth-child(3) { width: 58%; }
.cg3d-site-cta { background: var(--cg3d-orange-dark); border-radius: 6px; height: 28px; left: 28px; position: absolute; top: 112px; width: 94px; }
.cg3d-bubble-ring { bottom: 15px; position: absolute; right: 18px; }
.cg3d-bubble-ring::before { border: 3px solid var(--cg3d-blue); border-radius: 50%; content: ''; inset: -7px; position: absolute; }
.cg3d-open-card { background: #ffffff; border-radius: 18px; box-shadow: 0 24px 45px -16px rgba(7,20,38,.38); padding: 8px 8px 36px; position: absolute; right: 2%; top: 34px; transform: translateZ(48px); }
.cg3d-action-line { background: var(--cg3d-orange-dark); border-radius: 6px; bottom: 12px; height: 16px; left: 18px; position: absolute; right: 18px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--bubble .cg3d-bubble-ring { animation: cg3d-bubble-open 4.8s ease-in-out infinite; }

/* 02: Tall and Wide Video */
.cg3d-format-stage { height: 100%; position: relative; }
.cg3d-device { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 18px; box-shadow: 0 22px 44px -16px rgba(7,20,38,.32); padding: 10px; position: absolute; transform-style: preserve-3d; }
.cg3d-device--phone { left: 15%; top: 48px; transform: translateZ(20px) rotateY(6deg); }
.cg3d-device--wide { right: 8%; top: 96px; transform: translateZ(48px) rotateY(-5deg); }
.cg3d-resize-arrow { align-items: center; background: var(--cg3d-blue); border-radius: 50%; color: white; display: flex; font-size: 22px; font-weight: 700; height: 50px; justify-content: center; left: 45%; position: absolute; top: 137px; transform: translateZ(72px); width: 50px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--wide-video .cg3d-resize-arrow { animation: cg3d-resize 4s ease-in-out infinite; }

/* 03: Multivid */
.cg3d-journey { height: 100%; position: relative; }
.cg3d-journey-card { align-items: center; background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 14px; box-shadow: 0 20px 35px -15px rgba(7,20,38,.3); display: flex; flex-direction: column; gap: 8px; padding: 10px; position: absolute; transform-style: preserve-3d; width: 104px; }
.cg3d-journey-card b { color: var(--cg3d-navy); font-size: 11px; }
.cg3d-journey-card.is-one { left: 6%; top: 112px; transform: translateZ(10px) rotateY(5deg); }
.cg3d-journey-card.is-two { left: 39%; top: 65px; transform: translateZ(52px); }
.cg3d-journey-card.is-three { right: 3%; top: 112px; transform: translateZ(20px) rotateY(-5deg); }
.cg3d-journey-line { border-top: 3px dashed var(--cg3d-blue); position: absolute; top: 170px; width: 74px; }
.cg3d-journey-line.is-one { left: 27%; transform: rotate(-20deg); }
.cg3d-journey-line.is-two { right: 23%; transform: rotate(20deg); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--multivid .cg3d-journey-card.is-two { animation: cg3d-step-focus 5s ease-in-out infinite; }

/* 04: Live Chat */
.cg3d-chat-scene { height: 100%; position: relative; }
.cg3d-chat-scene > .cg3d-video { left: 13%; position: absolute; top: 64px; transform: translateZ(18px) rotateY(7deg); }
.cg3d-chat-panel { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.33); display: flex; flex-direction: column; gap: 12px; padding: 18px; position: absolute; right: 10%; top: 88px; transform: translateZ(56px); width: 220px; }
.cg3d-chat-panel strong { color: var(--cg3d-navy); font-size: 14px; }
.cg3d-message { border-radius: 9px; display: block; height: 34px; width: 76%; }
.cg3d-message.is-visitor { align-self: flex-start; background: #eef2f7; }
.cg3d-message.is-team { align-self: flex-end; background: var(--cg3d-blue); }
.cg3d-typing { display: flex; gap: 4px; }
.cg3d-typing i { background: var(--cg3d-muted); border-radius: 50%; height: 5px; width: 5px; }
.cg3d-online-dot { background: #e7f8ef; border: 1px solid #72c496; border-radius: 999px; color: #24784a; font-size: 10px; font-weight: 700; padding: 6px 10px; position: absolute; right: 8%; top: 59px; transform: translateZ(76px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--live-chat .cg3d-message.is-team { animation: cg3d-message 4s ease-in-out infinite; }

/* 05: Booking */
.cg3d-booking-scene { height: 100%; position: relative; }
.cg3d-calendar { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.3); left: 12%; padding: 20px; position: absolute; top: 62px; transform: translateZ(20px) rotateY(5deg); width: 290px; }
.cg3d-calendar strong { color: var(--cg3d-navy); font-size: 14px; }
.cg3d-calendar-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.cg3d-calendar-grid i { background: #eef2f7; border-radius: 6px; height: 28px; }
.cg3d-calendar-grid i.is-selected { background: var(--cg3d-blue); }
.cg3d-time-card { align-items: center; background: var(--cg3d-navy); border-radius: 12px; box-shadow: 0 18px 35px -12px rgba(7,20,38,.5); color: #ffffff; display: grid; gap: 3px; padding: 16px; position: absolute; right: 8%; top: 125px; transform: translateZ(65px); width: 140px; }
.cg3d-time-card span { font-size: 20px; font-weight: 800; }
.cg3d-time-card b { color: #afebc8; font-size: 10px; }
.cg3d-time-card i { align-items: center; background: #25a967; border-radius: 50%; display: flex; font-style: normal; height: 24px; justify-content: center; position: absolute; right: 12px; top: 12px; width: 24px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--booking .cg3d-time-card { animation: cg3d-confirm 4.5s ease-in-out infinite; }

/* 06: Custom Forms */
.cg3d-form-scene { height: 100%; position: relative; }
.cg3d-form-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.3); display: grid; gap: 12px; left: 15%; padding: 22px; position: absolute; top: 55px; transform: translateZ(34px) rotateY(5deg); width: 310px; }
.cg3d-progress { display: flex; gap: 6px; }
.cg3d-progress i { background: #dce3ee; border-radius: 5px; height: 5px; width: 42px; }
.cg3d-progress i:first-child { background: var(--cg3d-blue); }
.cg3d-form-card strong { color: var(--cg3d-navy); font-size: 16px; }
.cg3d-form-card label { border: 1px solid #aeb9ca; border-radius: 7px; display: block; height: 35px; }
.cg3d-form-card label span { background: #e7ebf1; display: block; height: 7px; margin: 13px; width: 48%; }
.cg3d-form-card button { background: var(--cg3d-orange-dark); border: 0; border-radius: 7px; color: #ffffff; font-size: 11px; font-weight: 700; height: 34px; }
.cg3d-form-step { align-items: center; background: var(--cg3d-blue); border-radius: 12px; box-shadow: 0 15px 28px -12px rgba(59,93,205,.6); color: #ffffff; display: flex; gap: 5px; padding: 12px; position: absolute; right: 10%; top: 113px; transform: translateZ(75px); }
.cg3d-form-step b { font-size: 22px; }
.cg3d-form-step span { font-size: 10px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--forms .cg3d-progress i:nth-child(2) { animation: cg3d-progress 4s steps(1) infinite; }

/* 07: Form Responses */
.cg3d-scene--responses .cg3d-window { height: 256px; top: 43px; }
.cg3d-inbox { padding: 14px; }
.cg3d-inbox-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.cg3d-inbox-top strong { color: var(--cg3d-navy); font-size: 13px; }
.cg3d-inbox-top span { background: #eef2f7; border-radius: 6px; color: var(--cg3d-muted); font-size: 9px; padding: 6px 28px 6px 8px; }
.cg3d-response-row { align-items: center; border-top: 1px solid #e4e9f1; display: flex; gap: 10px; padding: 10px 4px; }
.cg3d-response-row i { background: #dfe5ee; border-radius: 50%; height: 28px; width: 28px; }
.cg3d-response-row span { display: grid; gap: 2px; }
.cg3d-response-row b { color: var(--cg3d-text); font-size: 10px; }
.cg3d-response-row small { color: var(--cg3d-muted); font-size: 8px; }
.cg3d-response-row.is-new { background: var(--cg3d-blue-soft); }
.cg3d-response-row.is-new i { background: var(--cg3d-blue); }
.cg3d-csv-chip { background: var(--cg3d-orange-dark); border-radius: 8px; bottom: 16px; box-shadow: 0 14px 26px -10px rgba(184,90,18,.5); color: white; font-size: 11px; font-weight: 700; padding: 9px 13px; position: absolute; right: -18px; transform: translateZ(60px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--responses .cg3d-response-row.is-new { animation: cg3d-row-highlight 4.2s ease-in-out infinite; }

/* 08: Callback */
.cg3d-callback-scene { height: 100%; position: relative; }
.cg3d-phone { align-items: center; background: var(--cg3d-blue); border: 7px solid #ffffff; border-radius: 50%; box-shadow: 0 22px 40px -15px rgba(7,20,38,.4); color: #ffffff; display: flex; font-size: 36px; height: 132px; justify-content: center; left: 11%; position: absolute; top: 105px; transform: translateZ(48px); width: 132px; }
.cg3d-phone i { border: 2px solid rgba(255,255,255,.5); border-radius: 50%; inset: -14px; position: absolute; }
.cg3d-callback-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.3); display: grid; gap: 11px; padding: 22px; position: absolute; right: 8%; top: 62px; transform: translateZ(24px) rotateY(-5deg); width: 280px; }
.cg3d-callback-card strong { color: var(--cg3d-navy); }
.cg3d-callback-card label { border: 1px solid #aeb9ca; border-radius: 7px; color: var(--cg3d-muted); font-size: 10px; padding: 10px; }
.cg3d-callback-card div { display: flex; gap: 8px; }
.cg3d-callback-card div span { background: #eef2f7; border-radius: 6px; font-size: 9px; padding: 7px 10px; }
.cg3d-callback-card div span.is-active { background: var(--cg3d-blue); color: white; }
.cg3d-callback-card button { background: var(--cg3d-orange-dark); border: 0; border-radius: 7px; color: #fff; font-weight: 700; height: 34px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--callback .cg3d-phone { animation: cg3d-phone-ring 4.2s ease-in-out infinite; }

/* 09: Flexible Actions */
.cg3d-actions-scene { height: 100%; position: relative; }
.cg3d-actions-scene > .cg3d-video { left: 12%; position: absolute; top: 65px; transform: translateZ(44px) rotateY(7deg); }
.cg3d-action-deck { display: grid; gap: 9px; position: absolute; right: 11%; top: 72px; transform: translateZ(32px) rotateY(-5deg); width: 230px; }
.cg3d-action-deck span { background: #ffffff; border: 1px solid var(--cg3d-line); border-left: 6px solid var(--cg3d-blue); border-radius: 9px; box-shadow: 0 13px 24px -14px rgba(7,20,38,.45); color: var(--cg3d-navy); font-size: 11px; font-weight: 700; padding: 13px 16px; }
.cg3d-action-deck .is-book { border-left-color: var(--cg3d-orange-dark); }
.cg3d-action-deck .is-call { border-left-color: #2f9d67; }
.cg3d-cursor { border-bottom: 13px solid transparent; border-left: 21px solid var(--cg3d-navy); border-top: 13px solid transparent; bottom: 80px; position: absolute; right: 15%; transform: rotate(42deg) translateZ(70px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--actions .cg3d-cursor { animation: cg3d-cursor-select 5s ease-in-out infinite; }

/* 10: Captions */
.cg3d-caption-scene { height: 100%; position: relative; }
.cg3d-caption-scene > .cg3d-video { left: 11%; position: absolute; top: 62px; transform: translateZ(20px) rotateY(5deg); }
.cg3d-caption-text { bottom: 75px; display: grid; gap: 5px; left: 19%; position: absolute; transform: translateZ(58px); }
.cg3d-caption-text span { background: rgba(7,20,38,.92); color: white; font-size: 10px; font-weight: 700; padding: 5px 8px; width: max-content; }
.cg3d-timeline { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 12px; bottom: 50px; box-shadow: 0 17px 28px -14px rgba(7,20,38,.35); height: 86px; position: absolute; right: 7%; transform: translateZ(70px); width: 230px; }
.cg3d-timeline i,
.cg3d-timeline b { background: var(--cg3d-blue); bottom: 18px; height: 18px; left: 16px; position: absolute; width: 88px; }
.cg3d-timeline b { background: var(--cg3d-orange); left: 112px; width: 96px; }
.cg3d-timeline em { background: var(--cg3d-navy); height: 62px; left: 108px; position: absolute; top: 10px; width: 2px; }
.cg3d-cc { background: var(--cg3d-blue); border-radius: 7px; color: white; font-size: 12px; font-weight: 800; padding: 8px; position: absolute; right: 11%; top: 74px; transform: translateZ(75px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--captions .cg3d-timeline em { animation: cg3d-playhead 4.4s linear infinite; }

/* 11: Library */
.cg3d-scene--library .cg3d-window { height: 260px; top: 42px; }
.cg3d-library-top { align-items: center; display: flex; justify-content: space-between; padding: 14px; }
.cg3d-library-top strong { color: var(--cg3d-navy); font-size: 13px; }
.cg3d-library-top span { background: #eef2f7; border-radius: 6px; color: var(--cg3d-muted); font-size: 9px; padding: 7px 30px 7px 9px; }
.cg3d-library-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); padding: 0 14px; }
.cg3d-library-grid > div { background: #f6f8fb; border: 1px solid #e1e6ee; border-radius: 10px; padding: 7px; }
.cg3d-library-grid b { color: var(--cg3d-text); display: block; font-size: 9px; margin-top: 5px; }
.cg3d-reuse-chip { background: var(--cg3d-navy); border-radius: 7px; bottom: 12px; color: white; font-size: 9px; font-weight: 700; padding: 8px 10px; position: absolute; right: -12px; transform: translateZ(55px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--library .cg3d-library-grid > div:nth-child(2) { animation: cg3d-library-pick 4.6s ease-in-out infinite; }

/* 12 and 27: A/B tests */
.cg3d-test-scene,
.cg3d-shop-test-scene { height: 100%; position: relative; }
.cg3d-test-card,
.cg3d-shop-test-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 15px; box-shadow: 0 22px 40px -15px rgba(7,20,38,.32); padding: 9px 9px 13px; position: absolute; text-align: center; top: 60px; transform-style: preserve-3d; }
.cg3d-test-card.is-a,
.cg3d-shop-test-card.is-a { left: 11%; transform: translateZ(18px) rotateY(6deg); }
.cg3d-test-card.is-b,
.cg3d-shop-test-card.is-b { right: 11%; transform: translateZ(18px) rotateY(-6deg); }
.cg3d-test-card > b,
.cg3d-shop-test-card > b { align-items: center; background: var(--cg3d-blue); border-radius: 50%; color: white; display: flex; font-size: 12px; height: 28px; justify-content: center; left: -10px; position: absolute; top: -10px; width: 28px; }
.cg3d-test-card span,
.cg3d-shop-test-card span,
.cg3d-shop-test-card small { color: var(--cg3d-text); display: block; font-size: 10px; font-weight: 700; margin-top: 8px; }
.cg3d-test-switch,
.cg3d-vs { align-items: center; background: var(--cg3d-navy); border-radius: 50%; color: white; display: flex; height: 54px; justify-content: center; left: calc(50% - 27px); position: absolute; top: 139px; transform: translateZ(70px); width: 54px; }
.cg3d-test-switch i { background: var(--cg3d-orange); border-radius: 50%; height: 14px; position: absolute; top: 6px; width: 14px; }
.cg3d-test-switch strong,
.cg3d-vs { font-size: 11px; }
.cg3d-test-scene > em,
.cg3d-winner { background: var(--cg3d-orange-dark); border-radius: 7px; bottom: 43px; color: white; font-size: 10px; font-style: normal; font-weight: 700; padding: 8px 12px; position: absolute; right: 16%; transform: translateZ(72px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--bubble-test .cg3d-test-switch i { animation: cg3d-test-switch 4s ease-in-out infinite; }

/* 13: Analytics */
.cg3d-scene--analytics .cg3d-window { height: 264px; top: 37px; }
.cg3d-metrics { display: grid; gap: 9px; grid-template-columns: repeat(3,1fr); padding: 13px; }
.cg3d-metrics div { background: #f6f8fb; border: 1px solid #e3e8f0; border-radius: 9px; padding: 9px; }
.cg3d-metrics small { color: var(--cg3d-muted); display: block; font-size: 8px; }
.cg3d-metrics strong { color: var(--cg3d-navy); font-size: 15px; }
.cg3d-chart { align-items: end; border-bottom: 1px solid var(--cg3d-line); display: flex; gap: 10px; height: 103px; margin: 3px 24px; position: relative; }
.cg3d-chart span { background: var(--cg3d-blue); border-radius: 4px 4px 0 0; height: var(--h); width: 28px; }
.cg3d-chart span:nth-child(even) { background: var(--cg3d-orange); }
.cg3d-trend { background: #e7f8ef; border-radius: 7px; color: #24784a; font-size: 10px; font-weight: 700; padding: 7px 10px; position: absolute; right: -12px; top: 72px; transform: translateZ(60px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--analytics .cg3d-chart span { animation: cg3d-bars 4.8s ease-in-out infinite; transform-origin: center bottom; }

/* 14: Targeting */
.cg3d-target-scene { height: 100%; position: relative; }
.cg3d-target-scene .cg3d-window { height: 245px; left: 7%; top: 52px; width: 76%; }
.cg3d-page-list { display: grid; gap: 8px; left: 16px; position: absolute; top: 20px; width: 45%; }
.cg3d-page-list span { background: #eef2f7; border-radius: 6px; color: var(--cg3d-muted); font-size: 9px; padding: 8px; }
.cg3d-page-list span.is-active { background: var(--cg3d-blue); color: white; }
.cg3d-target-preview { border: 2px dashed var(--cg3d-blue); border-radius: 10px; height: 112px; position: absolute; right: 18px; top: 27px; width: 126px; }
.cg3d-target-preview i { background: var(--cg3d-orange); border-radius: 50%; bottom: 10px; height: 36px; position: absolute; right: 10px; width: 36px; }
.cg3d-clock { align-items: center; background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 50%; box-shadow: 0 18px 32px -14px rgba(7,20,38,.35); display: flex; height: 95px; justify-content: center; position: absolute; right: 4%; top: 108px; transform: translateZ(65px); width: 95px; }
.cg3d-clock i { background: var(--cg3d-navy); height: 25px; left: 47px; position: absolute; top: 23px; transform-origin: bottom; width: 2px; }
.cg3d-clock b { background: var(--cg3d-orange-dark); height: 19px; left: 47px; position: absolute; top: 47px; transform: rotate(55deg); transform-origin: top; width: 2px; }
.cg3d-clock span { background: var(--cg3d-navy); border-radius: 5px; bottom: -13px; color: white; font-size: 8px; padding: 5px; position: absolute; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--targeting .cg3d-clock i { animation: cg3d-clock 5s linear infinite; }

/* 15: Brand controls */
.cg3d-brand-scene { height: 100%; position: relative; }
.cg3d-palette { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 14px; box-shadow: 0 20px 36px -14px rgba(7,20,38,.3); display: flex; flex-wrap: wrap; gap: 10px; left: 7%; padding: 16px; position: absolute; top: 89px; transform: translateZ(58px); width: 170px; }
.cg3d-palette strong { color: var(--cg3d-navy); flex-basis: 100%; font-size: 11px; }
.cg3d-palette span { border: 4px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--cg3d-line); height: 34px; width: 34px; }
.cg3d-palette .is-blue { background: var(--cg3d-blue); }
.cg3d-palette .is-orange { background: var(--cg3d-orange); }
.cg3d-palette .is-navy { background: var(--cg3d-navy); }
.cg3d-device-preview { background: #ffffff; border: 1px solid var(--cg3d-line); box-shadow: 0 22px 40px -15px rgba(7,20,38,.32); position: absolute; }
.cg3d-device-preview.is-desktop { border-radius: 13px; height: 174px; right: 7%; top: 55px; transform: translateZ(18px) rotateY(-5deg); width: 260px; }
.cg3d-device-preview.is-mobile { border: 5px solid var(--cg3d-navy); border-radius: 17px; height: 160px; right: 20%; top: 126px; transform: translateZ(60px); width: 82px; }
.cg3d-device-preview i { background: var(--cg3d-blue); border: 4px solid white; border-radius: 50%; bottom: 12px; height: 48px; position: absolute; width: 48px; }
.cg3d-device-preview i.is-left { left: 12px; }
.cg3d-device-preview i.is-right { right: 6px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--brand .cg3d-palette .is-orange { animation: cg3d-swatch 4s ease-in-out infinite; }

/* 16: Localization */
.cg3d-language-scene { height: 100%; position: relative; }
.cg3d-language-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.32); display: grid; gap: 15px; left: 18%; padding: 24px; position: absolute; top: 62px; transform: translateZ(28px); width: 310px; }
.cg3d-globe { color: var(--cg3d-blue); font-size: 42px; position: absolute; right: 23px; top: 16px; }
.cg3d-language-card strong { color: var(--cg3d-navy); }
.cg3d-language-card div { display: flex; gap: 8px; }
.cg3d-language-card div i { background: #eef2f7; border-radius: 6px; color: var(--cg3d-muted); font-size: 9px; font-style: normal; font-weight: 700; padding: 8px 12px; }
.cg3d-language-card div i.is-active { background: var(--cg3d-blue); color: white; }
.cg3d-language-card label { background: var(--cg3d-orange-dark); border-radius: 7px; color: white; font-size: 11px; font-weight: 700; padding: 10px; text-align: center; }
.cg3d-lang-chip { align-items: center; background: var(--cg3d-navy); border: 4px solid white; border-radius: 50%; box-shadow: 0 13px 24px -12px rgba(7,20,38,.45); color: white; display: flex; font-size: 10px; font-weight: 800; height: 46px; justify-content: center; position: absolute; width: 46px; }
.cg3d-lang-chip.is-en { left: 8%; top: 106px; transform: translateZ(60px); }
.cg3d-lang-chip.is-da { right: 10%; top: 88px; transform: translateZ(70px); }
.cg3d-lang-chip.is-de { right: 13%; top: 209px; transform: translateZ(55px); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--localization .cg3d-lang-chip { animation: cg3d-language-orbit 5.2s ease-in-out infinite; }

/* 17: Connections */
.cg3d-connection-scene { height: 100%; position: relative; }
.cg3d-hub { align-items: center; background: var(--cg3d-blue); border: 8px solid #ffffff; border-radius: 22px; box-shadow: 0 24px 42px -15px rgba(59,93,205,.55); color: white; display: flex; flex-direction: column; height: 116px; justify-content: center; left: calc(50% - 58px); position: absolute; top: 111px; transform: translateZ(65px) rotate(4deg); width: 116px; z-index: 4; }
.cg3d-hub span { font-size: 25px; font-weight: 800; }
.cg3d-hub small { font-size: 9px; }
.cg3d-app { align-items: center; background: white; border: 1px solid var(--cg3d-line); border-radius: 11px; box-shadow: 0 16px 29px -14px rgba(7,20,38,.35); color: var(--cg3d-navy); display: flex; font-size: 10px; font-weight: 700; height: 54px; justify-content: center; position: absolute; width: 104px; }
.cg3d-app.is-slack { left: 4%; top: 65px; }
.cg3d-app.is-hubspot { right: 3%; top: 62px; }
.cg3d-app.is-klaviyo { bottom: 52px; left: 7%; }
.cg3d-app.is-hook { bottom: 48px; right: 5%; }
.cg3d-connector { border-top: 3px solid var(--cg3d-blue); position: absolute; width: 130px; }
.cg3d-connector i { background: var(--cg3d-orange); border-radius: 50%; height: 10px; position: absolute; top: -6px; width: 10px; }
.cg3d-connector.is-one { left: 21%; top: 124px; transform: rotate(22deg); }
.cg3d-connector.is-two { right: 20%; top: 122px; transform: rotate(-22deg); }
.cg3d-connector.is-three { bottom: 110px; left: 21%; transform: rotate(-20deg); }
.cg3d-connector.is-four { bottom: 107px; right: 20%; transform: rotate(20deg); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--connections .cg3d-connector i { animation: cg3d-data-travel 3.8s linear infinite; }

/* 18: Platforms */
.cg3d-platform-scene { height: 100%; position: relative; }
.cg3d-install-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.32); display: grid; gap: 13px; left: 20%; padding: 24px; position: absolute; top: 72px; transform: translateZ(24px); width: 300px; }
.cg3d-install-card strong { color: var(--cg3d-navy); }
.cg3d-install-card code { background: var(--cg3d-navy); border-radius: 7px; color: #dce5ff; font-size: 9px; padding: 12px; }
.cg3d-install-card span { color: #24784a; font-size: 10px; font-weight: 700; }
.cg3d-platform { align-items: center; background: white; border: 1px solid var(--cg3d-line); border-radius: 11px; box-shadow: 0 17px 30px -13px rgba(7,20,38,.35); display: flex; gap: 8px; padding: 10px; position: absolute; transform: translateZ(64px); }
.cg3d-platform b { align-items: center; border-radius: 7px; display: flex; font-size: 10px; height: 30px; justify-content: center; width: 35px; }
.cg3d-platform span { color: var(--cg3d-navy); font-size: 9px; font-weight: 700; }
.cg3d-platform.is-wordpress { left: 4%; top: 92px; }
.cg3d-platform.is-wordpress b { background: #21759b; color: white; }
.cg3d-platform.is-woo { bottom: 61px; left: 8%; }
.cg3d-platform.is-woo b { background: #96588a; color: white; }
.cg3d-platform.is-shopify { right: 3%; top: 116px; }
.cg3d-platform.is-shopify b { background: #7ab55c; color: white; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--platforms .cg3d-platform { animation: cg3d-platform-depth 5s ease-in-out infinite; }

/* 19: Security */
.cg3d-security-scene { height: 100%; position: relative; }
.cg3d-login { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.3); display: grid; gap: 12px; left: 12%; padding: 24px; position: absolute; top: 70px; transform: translateZ(20px) rotateY(5deg); width: 280px; }
.cg3d-login strong { color: var(--cg3d-navy); }
.cg3d-login label { border: 1px solid #aeb9ca; border-radius: 7px; color: var(--cg3d-muted); font-size: 11px; letter-spacing: 3px; padding: 10px; }
.cg3d-login button { background: var(--cg3d-blue); border: 0; border-radius: 7px; color: white; height: 34px; }
.cg3d-shield { align-items: center; background: var(--cg3d-blue); border: 7px solid white; border-radius: 50% 50% 44% 44%; box-shadow: 0 20px 38px -14px rgba(59,93,205,.55); color: white; display: flex; font-size: 27px; height: 92px; justify-content: center; position: absolute; right: 13%; top: 74px; transform: translateZ(68px); width: 82px; }
.cg3d-code { background: var(--cg3d-navy); border-radius: 12px; bottom: 60px; box-shadow: 0 17px 28px -12px rgba(7,20,38,.45); display: flex; gap: 5px; padding: 13px; position: absolute; right: 8%; transform: translateZ(55px); }
.cg3d-code i { background: #ffffff; border-radius: 5px; color: var(--cg3d-navy); font-size: 11px; font-style: normal; font-weight: 800; padding: 7px; }
.cg3d-code b { color: #afebc8; font-size: 9px; position: absolute; right: 10px; top: -17px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--security .cg3d-shield { animation: cg3d-secure 4.4s ease-in-out infinite; }

/* 20: Shoppable */
.cg3d-shop-scene { height: 100%; position: relative; }
.cg3d-shop-scene > .cg3d-video { left: 12%; position: absolute; top: 57px; transform: translateZ(36px) rotateY(7deg); }
.cg3d-product-pin { align-items: center; background: var(--cg3d-orange-dark); border: 4px solid white; border-radius: 50%; color: white; display: flex; font-size: 11px; font-weight: 800; height: 34px; justify-content: center; left: 31%; position: absolute; top: 141px; transform: translateZ(80px); width: 34px; }
.cg3d-product-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 15px; box-shadow: 0 24px 44px -16px rgba(7,20,38,.33); display: grid; gap: 11px; grid-template-columns: 74px 1fr; padding: 16px; position: absolute; right: 7%; top: 87px; transform: translateZ(54px) rotateY(-4deg); width: 260px; }
.cg3d-product-card > i { background: var(--cg3d-blue-soft); border-radius: 10px; grid-row: span 2; height: 82px; }
.cg3d-product-card span { display: grid; }
.cg3d-product-card b { color: var(--cg3d-navy); font-size: 11px; }
.cg3d-product-card small { color: var(--cg3d-muted); font-size: 10px; }
.cg3d-product-card button { background: var(--cg3d-orange-dark); border: 0; border-radius: 7px; color: white; font-size: 10px; font-weight: 700; grid-column: 2; height: 30px; }
.cg3d-shop-line { border-top: 3px dashed var(--cg3d-orange-dark); left: 36%; position: absolute; top: 157px; width: 120px; }
.cg3d-shop-line i { background: var(--cg3d-orange-dark); border-radius: 50%; height: 9px; position: absolute; top: -6px; width: 9px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--shoppable .cg3d-shop-line i { animation: cg3d-data-travel 3.4s linear infinite; }

/* 21: Multiple formats */
.cg3d-formats-scene { height: 100%; position: relative; }
.cg3d-format { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 13px; box-shadow: 0 20px 36px -15px rgba(7,20,38,.32); padding: 9px; position: absolute; text-align: center; transform-style: preserve-3d; }
.cg3d-format b { color: var(--cg3d-navy); display: block; font-size: 9px; margin-top: 5px; }
.cg3d-format.is-bubble { left: 5%; top: 115px; transform: translateZ(40px) rotateY(7deg); }
.cg3d-format.is-popup { left: 29%; top: 55px; transform: translateZ(58px); }
.cg3d-format.is-carousel { bottom: 66px; right: 20%; transform: translateZ(24px); width: 155px; }
.cg3d-format.is-carousel span { background: var(--cg3d-blue-soft); border-radius: 7px; display: inline-block; height: 88px; margin: 0 2px; width: 37px; }
.cg3d-format.is-reel { right: 3%; top: 80px; transform: translateZ(42px) rotateY(-7deg); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--formats .cg3d-format { animation: cg3d-format-cycle 6s ease-in-out infinite; }

/* 22: Catalog connection */
.cg3d-catalog-scene { height: 100%; position: relative; }
.cg3d-catalog-scene .cg3d-window { height: 245px; left: 5%; top: 53px; width: 72%; }
.cg3d-product-grid { display: grid; gap: 9px; grid-template-columns: repeat(2,1fr); left: 18px; position: absolute; top: 52px; width: 55%; }
.cg3d-product-grid i { background: var(--cg3d-blue-soft); border-radius: 7px; height: 57px; }
.cg3d-search-product { background: #eef2f7; border-radius: 6px; color: var(--cg3d-muted); font-size: 8px; left: 18px; padding: 8px 45px 8px 8px; position: absolute; top: 14px; }
.cg3d-linked-video { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 14px; box-shadow: 0 20px 38px -14px rgba(7,20,38,.35); padding: 8px 8px 26px; position: absolute; right: 4%; top: 79px; transform: translateZ(66px); }
.cg3d-linked-video b { bottom: 7px; color: #24784a; font-size: 9px; left: 13px; position: absolute; }
.cg3d-catalog-link { border-top: 3px dashed var(--cg3d-blue); left: 63%; position: absolute; top: 166px; width: 78px; }
.cg3d-catalog-link i { background: var(--cg3d-orange); border-radius: 50%; height: 10px; position: absolute; top: -6px; width: 10px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--catalogs .cg3d-catalog-link i { animation: cg3d-data-travel 3.7s linear infinite; }

/* 23: Cart action */
.cg3d-cart-scene { height: 100%; position: relative; }
.cg3d-cart-scene > .cg3d-video { left: 9%; position: absolute; top: 61px; transform: translateZ(25px) rotateY(7deg); }
.cg3d-cart-product { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 13px; box-shadow: 0 20px 38px -14px rgba(7,20,38,.35); display: grid; gap: 4px; padding: 12px; position: absolute; right: 27%; top: 79px; transform: translateZ(68px); width: 122px; }
.cg3d-cart-product i { background: var(--cg3d-blue-soft); border-radius: 7px; height: 70px; }
.cg3d-cart-product b { color: var(--cg3d-navy); font-size: 10px; }
.cg3d-cart-product span { color: var(--cg3d-muted); font-size: 9px; }
.cg3d-cart-tray { background: var(--cg3d-navy); border-radius: 13px 13px 20px 20px; bottom: 59px; color: white; height: 84px; padding: 15px; position: absolute; right: 5%; transform: translateZ(45px) rotateY(-6deg); width: 150px; }
.cg3d-cart-tray span { font-size: 11px; font-weight: 700; }
.cg3d-cart-tray i { background: var(--cg3d-orange); border-radius: 50%; bottom: -7px; height: 16px; position: absolute; width: 16px; }
.cg3d-cart-tray i:first-of-type { left: 22px; }
.cg3d-cart-tray i:last-of-type { right: 22px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--cart .cg3d-cart-product { animation: cg3d-add-cart 4.5s ease-in-out infinite; }

/* 24: Social import */
.cg3d-import-scene { height: 100%; position: relative; }
.cg3d-social-card { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 14px; box-shadow: 0 20px 36px -15px rgba(7,20,38,.32); padding: 8px 8px 8px 36px; position: absolute; top: 72px; }
.cg3d-social-card > b { align-items: center; background: var(--cg3d-blue); border-radius: 8px; color: white; display: flex; font-size: 18px; height: 32px; justify-content: center; left: -10px; position: absolute; top: 14px; width: 32px; }
.cg3d-social-card.is-facebook { left: 4%; transform: translateZ(34px) rotateY(6deg); }
.cg3d-social-card.is-instagram { left: 28%; top: 140px; transform: translateZ(50px); }
.cg3d-social-card.is-instagram > b { background: var(--cg3d-orange-dark); }
.cg3d-import-arrow { color: var(--cg3d-orange-dark); font-size: 36px; font-weight: 800; left: 54%; position: absolute; top: 148px; transform: translateZ(70px); }
.cg3d-import-library { background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 15px; box-shadow: 0 23px 42px -15px rgba(7,20,38,.34); display: grid; gap: 9px; padding: 18px; position: absolute; right: 4%; top: 74px; transform: translateZ(26px) rotateY(-6deg); width: 170px; }
.cg3d-import-library strong { color: var(--cg3d-navy); font-size: 11px; }
.cg3d-import-library i { background: var(--cg3d-blue-soft); border-radius: 6px; height: 32px; }
.cg3d-import-library span { background: #e7f8ef; border-radius: 6px; color: #24784a; font-size: 8px; font-weight: 700; padding: 5px; position: absolute; right: 10px; top: 10px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--social-import .cg3d-import-arrow { animation: cg3d-import 4s ease-in-out infinite; }

/* 25: Ecommerce triggers */
.cg3d-trigger-scene { height: 100%; position: relative; }
.cg3d-trigger-scene .cg3d-window { height: 246px; left: 5%; top: 52px; width: 73%; }
.cg3d-store-lines { left: 26px; position: absolute; top: 46px; width: 52%; }
.cg3d-store-lines i { background: #dde2ea; display: block; height: 9px; margin-bottom: 11px; }
.cg3d-trigger-bubble { bottom: 18px; position: absolute; right: 18px; }
.cg3d-trigger-deck { display: grid; gap: 10px; position: absolute; right: 4%; top: 73px; transform: translateZ(65px); }
.cg3d-trigger-deck span { background: #ffffff; border: 1px solid var(--cg3d-line); border-left: 5px solid var(--cg3d-blue); border-radius: 8px; box-shadow: 0 13px 24px -13px rgba(7,20,38,.4); color: var(--cg3d-navy); font-size: 9px; font-weight: 700; padding: 11px 13px; }
.cg3d-trigger-deck span.is-exit { border-left-color: var(--cg3d-orange-dark); }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--ecommerce-triggers .cg3d-trigger-bubble { animation: cg3d-trigger 4.8s ease-in-out infinite; }

/* 26: Revenue */
.cg3d-revenue-scene { height: 100%; position: relative; }
.cg3d-revenue-node { align-items: center; background: #ffffff; border: 1px solid var(--cg3d-line); border-radius: 13px; box-shadow: 0 18px 32px -14px rgba(7,20,38,.32); display: flex; flex-direction: column; height: 76px; justify-content: center; position: absolute; top: 117px; transform: translateZ(30px); width: 78px; z-index: 2; }
.cg3d-revenue-node b { color: var(--cg3d-blue); font-size: 20px; }
.cg3d-revenue-node span { color: var(--cg3d-navy); font-size: 9px; font-weight: 700; }
.cg3d-revenue-node.is-view { left: 3%; }
.cg3d-revenue-node.is-product { left: 25%; }
.cg3d-revenue-node.is-cart { left: 47%; }
.cg3d-revenue-node.is-order { left: 69%; }
.cg3d-revenue-node.is-order b { color: #25a967; }
.cg3d-revenue-line { border-top: 3px solid var(--cg3d-blue); position: absolute; top: 154px; width: 50px; }
.cg3d-revenue-line.is-one { left: 18%; }
.cg3d-revenue-line.is-two { left: 40%; }
.cg3d-revenue-line.is-three { left: 62%; }
.cg3d-revenue-line em { background: var(--cg3d-orange); border-radius: 50%; height: 9px; position: absolute; top: -6px; width: 9px; }
.cg3d-revenue-card { background: var(--cg3d-navy); border-radius: 12px; bottom: 47px; color: white; display: grid; gap: 2px; padding: 14px; position: absolute; right: 3%; transform: translateZ(70px); width: 153px; }
.cg3d-revenue-card small,
.cg3d-revenue-card span { color: #b8c5d7; font-size: 8px; }
.cg3d-revenue-card strong { font-size: 18px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--revenue .cg3d-revenue-line em { animation: cg3d-data-travel 3.2s linear infinite; }

/* 27: Shoppable A/B */
.cg3d-shop-test-card { top: 52px; }
.cg3d-shop-test-card .cg3d-video { height: 172px; width: 108px; }
.cg3d-vs { top: 133px; }
.cg3d-winner { bottom: 37px; }
.cgf-illustration-shell:not(.is-paused) .cg3d-scene--shoppable-test .cg3d-winner { animation: cg3d-winner 4.2s ease-in-out infinite; }

/* Motion */
@keyframes cg3d-bubble-open { 0%,100% { transform: translateZ(0) scale(.92); } 45%,65% { transform: translateZ(16px) scale(1.05); } }
@keyframes cg3d-resize { 0%,100% { transform: translateZ(72px) rotate(0); } 50% { transform: translateZ(82px) rotate(180deg); } }
@keyframes cg3d-step-focus { 0%,100% { transform: translateZ(52px) translateY(0); } 50% { transform: translateZ(68px) translateY(-9px); } }
@keyframes cg3d-message { 0%,28% { opacity: .25; transform: translateY(8px); } 45%,100% { opacity: 1; transform: translateY(0); } }
@keyframes cg3d-confirm { 0%,30% { opacity: .35; transform: translateZ(50px) translateY(8px); } 45%,100% { opacity: 1; transform: translateZ(65px) translateY(0); } }
@keyframes cg3d-progress { 0%,35% { background: #dce3ee; } 45%,100% { background: var(--cg3d-blue); } }
@keyframes cg3d-row-highlight { 0%,100% { background: var(--cg3d-blue-soft); } 50% { background: #ffffff; } }
@keyframes cg3d-phone-ring { 0%,100% { transform: translateZ(48px) rotate(0); } 4% { transform: translateZ(48px) rotate(-5deg); } 8% { transform: translateZ(48px) rotate(5deg); } 12% { transform: translateZ(48px) rotate(0); } }
@keyframes cg3d-cursor-select { 0%,20% { transform: rotate(42deg) translate3d(35px,28px,70px); } 50%,70% { transform: rotate(42deg) translate3d(-10px,-30px,70px); } 100% { transform: rotate(42deg) translate3d(35px,28px,70px); } }
@keyframes cg3d-playhead { from { transform: translateX(-80px); } to { transform: translateX(90px); } }
@keyframes cg3d-library-pick { 0%,100% { transform: translateY(0); box-shadow: none; } 50% { transform: translateY(-9px); box-shadow: 0 15px 25px -14px rgba(7,20,38,.4); } }
@keyframes cg3d-test-switch { 0%,40% { transform: translateX(-12px); } 55%,100% { transform: translateX(12px); } }
@keyframes cg3d-bars { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }
@keyframes cg3d-clock { to { transform: rotate(360deg); } }
@keyframes cg3d-swatch { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(228,131,51,.18); } }
@keyframes cg3d-language-orbit { 0%,100% { margin-top: 0; } 50% { margin-top: -10px; } }
@keyframes cg3d-data-travel { from { left: 0; } to { left: calc(100% - 10px); } }
@keyframes cg3d-platform-depth { 0%,100% { margin-top: 0; } 50% { margin-top: -7px; } }
@keyframes cg3d-secure { 0%,100% { transform: translateZ(68px) scale(1); } 50% { transform: translateZ(78px) scale(1.07); } }
@keyframes cg3d-format-cycle { 0%,100% { margin-top: 0; } 50% { margin-top: -9px; } }
@keyframes cg3d-add-cart { 0%,35% { transform: translate3d(0,0,68px) scale(1); } 60%,75% { transform: translate3d(100px,125px,68px) scale(.48); } 100% { transform: translate3d(0,0,68px) scale(1); } }
@keyframes cg3d-import { 0%,100% { transform: translateX(-12px); opacity: .45; } 50% { transform: translateX(16px); opacity: 1; } }
@keyframes cg3d-trigger { 0%,28% { opacity: 0; transform: translateY(15px) scale(.75); } 45%,85% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(15px) scale(.75); } }
@keyframes cg3d-winner { 0%,100% { transform: translateZ(72px) scale(1); } 50% { transform: translateZ(82px) scale(1.08); } }

@media (max-width: 767px) {
    .cgf-browser-shell--3d,
    .cgf-browser-shell--3d .cgf-browser-content,
    .cgf-browser-shell--3d .cgf-illustration-shell {
        min-height: 300px;
    }

    .cg3d-scene {
        min-height: 285px;
    }

    .cg3d-object,
    .cgf-feature-row:nth-child(even) .cg3d-object {
        transform: rotateY(-7deg) rotateX(3deg) scale(.82);
    }

    .cg3d-floor {
        bottom: 8px;
    }
}

@media (max-width: 390px) {
    .cg3d-object,
    .cgf-feature-row:nth-child(even) .cg3d-object {
        transform: rotateY(-5deg) rotateX(2deg) scale(.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg3d-scene *,
    .cg3d-scene *::before,
    .cg3d-scene *::after {
        animation: none !important;
        transition: none !important;
    }
}