body{margin:0;background:#020F18}
a{color:#F4F8FF}a:hover{color:#F2B3FF}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box;position:relative}
.glass{background:linear-gradient(135deg,rgba(242,236,255,0.07),rgba(13,8,28,0.25));border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 24px 60px -30px rgba(0,0,0,0.8);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.gtext{background:linear-gradient(115deg,#8B6CFF 0%,#C084FC 40%,#FF7DC2 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{background:linear-gradient(115deg,#5C36FF 0%,#A855F7 38%,#FF5DB1 68%,#6F59FF 100%);color:#FFFFFF;box-shadow:0 24px 62px -22px rgba(255,93,177,0.9),0 0 34px rgba(168,85,247,0.24),inset 0 1px 0 rgba(255,255,255,0.22)}
.cta:hover{color:#FFFFFF;filter:brightness(1.08)}
.grid-bg{background-image:linear-gradient(rgba(169,121,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(169,121,255,0.07) 1px,transparent 1px);background-size:56px 56px}
@keyframes cqShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes cqDrift{0%{transform:translate(-30%,-30%)}50%{transform:translate(30%,20%)}100%{transform:translate(-30%,-30%)}}
.glow-card{position:relative;overflow:hidden;isolation:isolate;transition:transform 300ms ease}
.glow-card:hover{transform:translateY(-4px)}
.glow-card{border-color:rgba(255,255,255,0.06) !important}
.glow-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0.28;background:linear-gradient(115deg,#5C36FF,#A855F7,#FF5DB1,#6F59FF,#5C36FF);background-size:300% 300%;animation:cqShift 6s ease-in-out infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.glow-card::after{content:"";position:absolute;width:140%;height:140%;left:-20%;top:-20%;background:radial-gradient(circle at 50% 50%,rgba(168,85,247,0.22),rgba(255,93,177,0.10) 30%,rgba(0,0,0,0) 55%);animation:cqDrift 10s ease-in-out infinite;pointer-events:none;z-index:-1}
.glow-card:nth-child(2)::before,.glow-card:nth-child(2)::after{animation-delay:-1s}
.glow-card:nth-child(3)::before,.glow-card:nth-child(3)::after{animation-delay:-2s}
.glow-card:nth-child(4)::before,.glow-card:nth-child(4)::after{animation-delay:-3s}
.glow-card:nth-child(5)::before,.glow-card:nth-child(5)::after{animation-delay:-4s}
.glow-card:nth-child(6)::before,.glow-card:nth-child(6)::after{animation-delay:-5s}
.glow-card:nth-child(7)::before,.glow-card:nth-child(7)::after{animation-delay:-2.5s}
.glow-card:nth-child(8)::before,.glow-card:nth-child(8)::after{animation-delay:-4.5s}
.glow-icon{background:linear-gradient(115deg,rgba(92,54,255,0.45),rgba(168,85,247,0.25),rgba(255,93,177,0.4),rgba(92,54,255,0.45));background-size:300% 300%;animation:cqShift 6s ease-in-out infinite}
.gtext-anim{background-size:250% 100%;animation:cqShift 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.glow-card::before,.glow-card::after,.glow-icon,.gtext-anim{animation:none}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.nav-in{animation:rise 900ms cubic-bezier(.16,1,.3,1) both}
.hero-stack>*{animation:rise 1100ms cubic-bezier(.16,1,.3,1) both}
.hero-stack>*:nth-child(1){animation-delay:150ms}
.hero-stack>*:nth-child(2){animation-delay:270ms}
.hero-stack>*:nth-child(3){animation-delay:390ms}
.hero-stack>*:nth-child(4){animation-delay:510ms}
.hero-stack>*:nth-child(5){animation-delay:630ms}
.hero-stack>*:nth-child(6){animation-delay:780ms}
.hero-stack>*:nth-child(7){animation-delay:900ms}
.js-reveal .rv{opacity:0;transform:translateY(36px) scale(.985);transition:opacity 900ms cubic-bezier(.16,1,.3,1),transform 1100ms cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js-reveal .rv.in{opacity:1;transform:none}
@media (min-width:900px){.faq-side{position:sticky;top:112px;align-self:flex-start}}
@media (prefers-reduced-motion:reduce){.nav-in,.hero-stack>*{animation:none !important}.js-reveal .rv{opacity:1;transform:none;filter:none;transition:none}}
.zoomable img{transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.zoomable:hover img{transform:scale(1.03)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.lb-overlay{animation:lbIn 250ms ease both}
.lb-img{animation:lbZoom 450ms cubic-bezier(.16,1,.3,1) both}
@media (max-width:760px){.hide-sm{display:none !important}}

html{scroll-behavior:smooth;scroll-padding-top:110px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #F2B3FF;outline-offset:5px}[hidden]{display:none!important}.cq-video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#06121D;border:1px solid rgba(255,255,255,.08)}#course-video{display:block;width:100%;height:100%;object-fit:contain}#play-preview{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background:linear-gradient(180deg,rgba(3,9,18,.04),rgba(3,9,18,.35));color:#F4F8FF}.cq-video-label{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.cq-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;outline:10px solid rgba(255,255,255,.08)}.faq-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform 350ms ease,background 350ms ease;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}.faq-panel{display:grid;transition:grid-template-rows 380ms ease,opacity 380ms ease;grid-template-rows:0fr;opacity:0}.faq-card.is-open{border-color:rgba(200,140,255,.45);background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(13,8,28,.35));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px -30px rgba(168,85,247,.55)}.faq-card.is-open .faq-panel{grid-template-rows:1fr;opacity:1}.faq-card.is-open .faq-icon{transform:rotate(45deg);background:linear-gradient(115deg,#5C36FF,#A855F7 45%,#FF5DB1);box-shadow:0 8px 24px -8px rgba(255,93,177,.8)}.toast-status{opacity:0;transform:translateY(16px)}.toast-status.is-visible{opacity:1;transform:none}
@media(max-width:600px){.wrap{padding-left:18px;padding-right:18px}#preview{box-sizing:border-box}.cq-root [style*="minmax(340px"]{grid-template-columns:minmax(0,1fr)!important}.nav-in>.glass{gap:10px!important;padding-left:14px!important}.nav-in>a,.nav-in .glass>a{min-width:0}.nav-in [style*="letter-spacing: 0.14em"]{font-size:11px!important;letter-spacing:.08em!important}.nav-in .cta{padding:0 14px!important}.hero-stack{min-width:0}.cq-play{width:64px;height:64px}.cq-video-label{font-size:10px;top:12px;left:12px}.cq-root [style*="flex: 2 1 560px"]{flex-basis:100%!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.faq-panel,.faq-icon,.toast-status{transition:none}}

/* Keep the complete preview thumbnail visible at every screen width. */
#preview{box-sizing:border-box;max-width:980px;min-width:0}
.cq-video-frame{width:100%;box-sizing:border-box;min-width:0}
#course-video{position:absolute;inset:0;object-fit:contain;object-position:center}
#play-preview{box-sizing:border-box;padding:0;background:#06121D}
.cq-preview-thumbnail{position:absolute;inset:0;display:block;width:100%;height:100%;box-sizing:border-box;padding:0;object-fit:cover;object-position:center;pointer-events:none}
.cq-video-label,.cq-play{z-index:1}

/* Blue glass workflow panel and clear closed-platform drawbacks. */
#one-workflow.workflow-blue-glass{isolation:isolate;position:relative;background:radial-gradient(ellipse at 0% 0%,rgba(139,92,246,.10),transparent 62%),radial-gradient(ellipse at 100% 100%,rgba(236,72,153,.08),transparent 65%),linear-gradient(135deg,rgba(65,29,112,.22),rgba(42,13,47,.28));border:1px solid rgba(216,180,254,.16)!important;box-shadow:inset 0 1px 0 rgba(250,232,255,.08),inset 0 -1px 0 rgba(236,72,153,.05),0 26px 72px -30px rgba(168,85,247,.16);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
#one-workflow .workflow-examples{background:linear-gradient(135deg,rgba(240,171,252,.04),rgba(86,25,78,.10))!important;border-color:rgba(216,180,254,.14)!important;box-shadow:inset 0 1px 0 rgba(250,232,255,.07),0 14px 36px -24px rgba(0,0,0,.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#platform-comparison .closed-platform-point{display:flex;align-items:flex-start;gap:10px;padding-right:12px}
#platform-comparison .comparison-cross{flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.26);color:#FB7185;font-size:12px;font-weight:700;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#platform-comparison h2{color:#F4F8FF}#platform-comparison .codex-benefit{display:flex;align-items:flex-start;gap:10px}#platform-comparison .comparison-check{flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(74,222,128,.13);border:1px solid rgba(74,222,128,.30);color:#4ADE80;font-size:13px;font-weight:700;line-height:1}

.hero-title-line{display:block;white-space:nowrap;font:inherit;letter-spacing:inherit}
#one-workflow .workflow-kicker{color:#9EB7C7!important}
#platform-comparison .comparison-table{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
#platform-comparison .comparison-table::-webkit-scrollbar{display:none;width:0;height:0}

.hero-no-code.gtext{padding-bottom:.16em;margin-bottom:0;overflow:visible}

#course-video-dialog{width:min(1100px,calc(100vw - 32px));max-width:none;max-height:92vh;max-height:92svh;margin:auto;padding:12px;box-sizing:border-box;border:1px solid rgba(216,180,254,.26);border-radius:24px;background:linear-gradient(135deg,rgba(34,20,56,.98),rgba(3,15,25,.98));color:#F4F8FF;box-shadow:0 40px 120px -24px rgba(124,58,237,.5);overflow:auto;font-family:'DM Sans',system-ui,sans-serif}
#course-video-dialog::backdrop{background:rgba(2,8,16,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.course-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 12px 8px;font-size:14px;line-height:1.4}
[data-close-video-dialog]{flex:0 0 44px;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:inherit;cursor:pointer}
[data-close-video-dialog]:hover{background:rgba(168,85,247,.25)}
[data-close-video-dialog]:focus-visible{outline:2px solid #F2B3FF;outline-offset:3px}
#lightbox-course-video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(92vh - 90px);max-height:calc(92svh - 90px);object-fit:contain;background:#020F18;border-radius:14px}
@media(max-width:600px){#course-video-dialog{padding:10px;border-radius:18px}.course-dialog-header{font-size:12px;gap:8px;padding-left:2px}}