@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--accent:#ff6a00;--cyan:var(--accent);--pink:#ff8b2c;--bg:#050b13;--panel:#0a1320;--line:#1b2a3b;--muted:#8995a6;--text:#f5f7fa}
html{background:#050b13;scroll-padding-top:94px}body{background:#050b13;color:var(--text);opacity:0;transform:translateY(5px);transition:opacity .28s ease,transform .28s ease}body.pageReady{opacity:1;transform:none}body.pageLeaving{opacity:0;transform:translateY(3px)}.noise{display:none}.shell{width:min(1280px,calc(100% - 44px))}
.announcementBar{position:relative;z-index:40;border-bottom:1px solid #172235;background:#0b1422;color:#cfd6df;font-size:12px}.announcementBar .shell{min-height:38px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}.announcementBar a{color:var(--accent);font-weight:800;text-decoration:none}.announceDot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(255,106,0,.7)}
.nav{position:relative;z-index:35;height:84px}.brand{min-width:max-content}.brandmark{width:58px;height:58px;flex-basis:58px}.brandmark img{filter:drop-shadow(0 6px 13px rgba(255,106,0,.2))}.brandName{font-family:Inter,sans-serif;font-size:20px;line-height:.9;letter-spacing:.04em}.brandName small{display:block;margin-top:7px;color:var(--accent);font-size:12px;letter-spacing:.36em}.mainNav{display:flex;align-items:center;gap:8px}.mainNav a{position:relative;color:#aab2be;text-decoration:none;font:700 13px Inter;padding:14px 17px;border-radius:9px}.mainNav a:hover,.mainNav a.active{color:#fff;background:#101b29}.mainNav a.active:after{content:"";position:absolute;left:17px;right:17px;bottom:-6px;height:3px;border-radius:3px;background:var(--accent)}.navActions>a,.navActions button{border-color:#253448;background:#0a1320;color:#d3d8e0;padding:11px 14px;font-size:12px}.navActions>a:hover,.navActions>a.active{border-color:var(--accent);color:#fff}.navActions .loginButton{font-weight:800;color:#fff}
.foxHero{position:relative;isolation:isolate;min-height:760px;padding:68px 0 54px;text-align:center;background-color:#050b13;background-image:url('brand/clastievideo-fox-hero.png');background-position:center top;background-size:cover;background-repeat:no-repeat;border-top:1px solid #162233;border-bottom:1px solid #182435;overflow:hidden}.foxHero:before{content:"";position:absolute;z-index:-1;inset:0;background:rgba(3,9,16,.18)}.heroInner{position:relative;z-index:2}.eyebrow{display:inline-flex;border:1px solid #3a2b21;background:#141512;border-radius:8px;padding:9px 12px;color:#ffb070;letter-spacing:.13em;margin-bottom:18px}.hero h1{max-width:960px;font-family:'Roboto Condensed',Inter,sans-serif;font-size:clamp(52px,6.7vw,94px);font-weight:900;letter-spacing:-.045em;line-height:.88;text-shadow:0 8px 40px rgba(0,0,0,.55)}.hero h1 span{color:var(--accent);background:none;-webkit-text-fill-color:initial}.lead{max-width:610px;margin:23px auto 25px;color:#bac2cd;font-size:16px;line-height:1.55}
.platformBadges{max-width:860px;margin:0 auto;justify-content:stretch;gap:0;border:1px solid #273548;border-bottom:0;background:rgba(7,17,29,.92);border-radius:16px 16px 0 0;overflow:hidden}.platformBadges button{flex:1;border:0;border-right:1px solid #263448;background:transparent;color:#b9c1cc;padding:15px 12px;font:800 12px Inter;cursor:pointer}.platformBadges button:last-child{border-right:0}.platformBadges button.active,.platformBadges button:hover{color:#fff;box-shadow:inset 0 -3px var(--accent)}.downloader{max-width:860px;margin:0 auto;border-color:#273548;border-radius:0 0 16px 16px;background:rgba(7,17,29,.94);box-shadow:0 24px 70px rgba(0,0,0,.35);padding:12px}.inputwrap{border:1px solid #273548;background:#08111d;border-radius:11px}.inputwrap input{font-size:15px;padding:18px 13px}.paste{border:0;background:#121f2e;color:#e1e5eb;margin-right:5px}.primary{background:var(--accent);color:#fff;border-radius:11px;font-weight:900;box-shadow:0 8px 22px rgba(255,106,0,.2)}.primary:hover{box-shadow:0 10px 28px rgba(255,106,0,.3)}
.downloadJourney{max-width:860px;margin:14px auto 0;padding:18px 20px;border:1px solid #2b3a4d;background:rgba(7,17,29,.95);border-radius:14px;text-align:left}.downloadJourney[hidden]{display:none}.journeyTop{display:flex;align-items:center;justify-content:space-between}.journeyTop strong{font-size:12px}.journeyTop b{color:var(--accent);font-size:20px}.journeyTrack{height:5px;margin:15px 0 13px;background:#1a2736;border-radius:99px;overflow:hidden}.journeyTrack span{display:block;width:12%;height:100%;background:var(--accent);transition:width .5s ease}.journeySteps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;color:#6f7c8d;font-size:10px}.journeySteps span.active{color:#fff}.status{color:#aab5c2}.result{max-width:860px;border-color:#2b3a4d;background:#08121f}.result a{background:var(--accent);color:#fff}.trustrow{color:#93a0af}.trustrow span:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--accent)}
.features{max-width:1280px;border-color:#1b2a3b;background:#07101b}.features article{border-color:#1b2a3b}.features b,.cardTitle>span,.editorEyebrow,.persistentExportHead span{color:var(--accent)}.socialSection{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start;padding:100px 0;border-bottom:1px solid var(--line)}.socialSection h2{font:900 clamp(38px,5vw,64px)/.98 'Roboto Condensed',Inter;margin:13px 0 18px;letter-spacing:-.04em}.socialSection p{color:var(--muted);line-height:1.7}.contactMail{display:inline-block;margin-top:15px;color:var(--accent);font-weight:800;text-decoration:none}.socialLinks{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.socialLinks a{display:flex;justify-content:space-between;gap:15px;padding:24px 4px;border-bottom:1px solid var(--line);color:#fff;text-decoration:none}.socialLinks a:nth-child(odd){padding-right:20px}.socialLinks a:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}.socialLinks a b{color:var(--accent);font-size:11px}.socialEmpty{grid-column:1/-1;padding:25px 0}
.siteFooter{border-top:1px solid #1a2737;background:#030810;padding:62px 0 0}.footerGrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:70px;padding-bottom:46px}.footerGrid>div{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.footerGrid p{max-width:420px;color:#768396;line-height:1.7}.footerGrid h3{margin:0 0 8px;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.13em}.footerGrid a:not(.brand){color:#8e9aaa;text-decoration:none;font-size:12px}.footerGrid a:hover{color:var(--accent)}.footerBottom{border-top:1px solid #152131;padding:22px 0 28px;display:flex;justify-content:space-between;gap:25px;color:#647184;font-size:11px}.footerBottom a{color:var(--accent);text-decoration:none}.footerBottom strong{color:#fff}.footerBrand{margin-bottom:8px}.faq{padding:90px 0}.faq h2,.pageHead h1{font-family:'Roboto Condensed',Inter,sans-serif}.accordions details{border-color:#1b2a3b}
.authCard,.adminCard,.manageSection,.emptyState{border-color:#223247;background:#08121e}.authPage{background-color:#050b13;background-image:url('brand/clastievideo-fox-hero.png');background-position:center;background-size:cover}.authCard{backdrop-filter:blur(16px);background:rgba(7,17,29,.94)}.backPublic{display:block;margin-top:20px;text-align:center;color:#98a5b5;font-size:11px;text-decoration:none}.backPublic:hover{color:var(--accent)}.contentPage{padding-top:58px}.pageHead{padding-bottom:30px;border-bottom:1px solid var(--line)}.pageHead h1{letter-spacing:-.035em}.videoCard{border-color:#233247;background:#08121e}.cardDownload,.videoCard a{background:var(--accent);color:#fff}.playerControls{background:rgba(4,10,18,.9)}.videoProgress,.volumeSlider{accent-color:var(--accent)}

/* Public library: every upload uses the same compact, center-cropped preview. */
.libraryPage .videoGrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.libraryPage .videoPlayer{aspect-ratio:16/9;max-height:220px}
.libraryPage .videoPlayer .libraryVideo{object-fit:cover;object-position:center}
.libraryPage .playerControls{grid-template-columns:34px minmax(48px,1fr) 34px 52px 34px;gap:5px;left:7px;right:7px;bottom:7px;padding:6px}
.libraryPage .playerControls button{width:32px;height:30px}
.libraryPage .timeLabel{display:none}
.libraryPage .bigPlay{width:52px;height:52px;font-size:18px}
@media(max-width:620px){.libraryPage .videoGrid{grid-template-columns:1fr}.libraryPage .videoPlayer{max-height:none}}
.adminCategories{position:sticky;top:10px;z-index:30;display:flex;gap:7px;overflow:auto;margin:0 0 18px;padding:9px;border:1px solid #26364a;background:rgba(6,15,26,.96);border-radius:13px;box-shadow:0 14px 34px rgba(0,0,0,.25)}.adminCategories a{flex:0 0 auto;color:#9da8b6;text-decoration:none;padding:9px 12px;border-radius:8px;font:700 11px Inter}.adminCategories a:hover{background:#152235;color:#fff}.adminStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}.adminStats article{padding:19px;border:1px solid #223247;background:#08121e;border-radius:13px}.adminStats span{display:block;color:#7e8b9d;font-size:10px}.adminStats b{display:block;margin-top:9px;font-size:23px}.onlineText{color:#5edc92}.settingsPanel,.securitySummary{margin:20px 0;padding:26px;border:1px solid #26364a;background:#08121e;border-radius:17px}.settingsHead,.settingsDivider,.securitySummary{display:flex;align-items:center;justify-content:space-between;gap:26px}.settingsHead>div>span,.settingsDivider>div>span,.securitySummary>div>span{color:var(--accent);font:800 9px Inter;letter-spacing:.14em}.settingsHead h2,.securitySummary h2{margin:7px 0 5px;font-size:24px}.settingsHead p,.securitySummary p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.settingsSave{min-height:46px}.settingsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}.settingsGrid label{display:grid;gap:7px;color:#8794a5;font-size:10px}.settingsGrid input,.settingsGrid textarea{width:100%;border:1px solid #2a3a4e;background:#050d17;color:#fff;border-radius:9px;padding:12px;outline:none;font:500 12px Inter}.settingsGrid input:focus,.settingsGrid textarea:focus{border-color:var(--accent)}.settingsGrid textarea{min-height:90px;resize:vertical}.settingsGrid .wideField{grid-column:span 3}.settingsDivider{margin-top:28px;padding-top:25px;border-top:1px solid var(--line)}.settingsDivider h3{margin:6px 0 0}.switchLabel{display:flex;align-items:center;gap:9px;color:#dbe0e7;font-size:11px}.switchLabel input{accent-color:var(--accent)}.settingsSaveBottom{margin-top:22px;margin-left:auto;min-height:48px}.securityBadges{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.securityBadges span{border:1px solid #2e4653;background:#0b1b21;color:#8fd6af;border-radius:99px;padding:8px 10px;font-size:9px}
@media(max-width:900px){.mainNav{display:none}.foxHero{min-height:700px;background-position:62% top}.socialSection{grid-template-columns:1fr;gap:35px}.footerGrid{grid-template-columns:1.5fr 1fr 1fr}.settingsGrid{grid-template-columns:1fr 1fr}.settingsGrid .wideField{grid-column:span 2}.adminStats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.shell{width:min(100% - 24px,1280px)}.announcementBar .shell{font-size:10px;padding:7px 0}.announcementBar a{display:none}.nav{height:72px}.brandmark{width:45px;height:45px;flex-basis:45px}.brandName{font-size:16px}.brandName small{font-size:9px}.navActions .userChip,.navActions form{display:none}.foxHero{min-height:670px;padding:55px 0 42px;background-position:70% top}.foxHero:before{background:rgba(3,9,16,.48)}.hero h1{font-size:clamp(47px,15vw,67px)}.lead{font-size:14px}.platformBadges button{padding:13px 7px;font-size:10px}.downloader{display:flex}.downloader .inputwrap{width:100%}.downloader .primary{width:100%;height:54px}.journeySteps{grid-template-columns:1fr 1fr;row-gap:10px}.features{grid-template-columns:1fr}.socialSection{padding:70px 0}.socialLinks{grid-template-columns:1fr}.socialLinks a:nth-child(n){padding:20px 3px;border-left:0}.footerGrid{grid-template-columns:1fr;gap:30px}.footerBottom{flex-direction:column}.adminStats{grid-template-columns:1fr 1fr}.settingsHead,.settingsDivider,.securitySummary{align-items:flex-start;flex-direction:column}.settingsGrid{grid-template-columns:1fr}.settingsGrid .wideField{grid-column:auto}.settingsSave{width:100%}}

/* Seamless, duplicated announcement rail. Each admin textarea line is one item. */
.announcementBar{height:38px;overflow:hidden}
.announcementViewport{width:100%;height:100%;overflow:hidden}
.announcementTrack{display:flex;width:max-content;height:100%;will-change:transform;animation:announcementMarquee var(--announcement-duration,22s) linear infinite}
.announcementGroup{display:flex;flex:0 0 auto;align-items:center;justify-content:space-around;gap:64px;min-width:100vw;height:100%;padding:0 32px}
.announcementMessage{display:flex!important;align-items:center;gap:10px;flex:0 0 auto;color:#cfd6df!important;font:600 11px Inter;text-decoration:none;white-space:nowrap}
.announcementMessage i{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(255,106,0,.7)}
.announcementMessage b{color:var(--accent);font-size:10px}
@keyframes announcementMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:620px){.announcementBar{height:34px}.announcementGroup{gap:42px;padding:0 21px}.announcementMessage{font-size:10px}.announcementMessage b{display:none}}

/* The archive uses cinematic cover crops; fullscreen always restores the full frame. */
.libraryPage .libraryVideo{transition:filter .22s ease,opacity .22s ease}
.libraryPage .videoPlayer:fullscreen,.libraryPage .videoPlayer:-webkit-full-screen{width:100vw;height:100vh;max-height:none!important;aspect-ratio:auto!important;background:#000}
.libraryPage .videoPlayer:fullscreen .libraryVideo,.libraryPage .videoPlayer:-webkit-full-screen .libraryVideo{width:100%;height:100%;object-fit:contain!important;object-position:center;background:#000}
.libraryPage .videoPlayer:fullscreen .playerControls,.libraryPage .videoPlayer:-webkit-full-screen .playerControls{left:50%;right:auto;bottom:20px;width:min(900px,calc(100% - 32px));transform:translateX(-50%);grid-template-columns:38px minmax(120px,1fr) 38px 90px 38px;padding:9px 12px}
.socialLabel{display:flex;align-items:center;gap:14px}.socialLabel img{width:25px;height:25px}.socialLabel em{font-style:normal}.footerSocial{display:flex!important;align-items:center;gap:8px}.footerSocial img{width:15px;height:15px}
.navActions .signupButton{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:800}.navActions .signupButton:hover{background:#ff7a1d;color:#fff}

/* V20 — more character, depth and motion without changing the product flow. */
body{font-family:'Space Grotesk',Inter,system-ui,sans-serif;letter-spacing:-.01em}
button,input,select,textarea{font-family:'Space Grotesk',Inter,system-ui,sans-serif}
.brandName,.mainNav a,.navActions>a,.navActions button,.platformBadges button,.primary,.footerGrid h3{font-family:'Space Grotesk',Inter,sans-serif}
.hero h1,.socialSection h2,.faq h2,.pageHead h1,.authCard h1,.communityHero h1,.profileIdentity h1{font-family:'Archivo Black','Space Grotesk',sans-serif;font-weight:400}
.hero h1{letter-spacing:-.065em;line-height:.86}.lead{font-weight:500;letter-spacing:-.018em}.eyebrow,.editorEyebrow{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700}

.publicHome{position:relative;overflow-x:hidden}
.publicHome:before{content:"";position:fixed;z-index:0;inset:-12vh -8vw;background:url('brand/clastievideo-embers-v20.png') center/cover no-repeat;opacity:.055;pointer-events:none;animation:ambientEmbers 24s ease-in-out infinite alternate;will-change:transform,opacity}
.publicHome>header,.publicHome>main,.publicHome>footer,.publicHome>.announcementBar{position:relative;z-index:1}
.foxHero{background-image:none;background-color:#050b13}
.heroBackdrop,.heroEmbers{position:absolute;z-index:-2;inset:-4%;pointer-events:none;overflow:hidden}
.heroBackdrop img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:translate3d(var(--hero-x,0),var(--hero-y,0),0) scale(1.04);animation:heroBreath 15s ease-in-out infinite alternate;will-change:transform;filter:saturate(1.04) contrast(1.03)}
.heroEmbers{z-index:-1;inset:0;mix-blend-mode:screen;opacity:.52}
.heroEmbers img{width:112%;height:112%;object-fit:cover;object-position:center;animation:heroEmbersDrift 18s ease-in-out infinite alternate;will-change:transform,opacity}
.foxHero:before{z-index:0;background:rgba(3,9,16,.24)}
.heroInner{animation:heroEntrance .85s cubic-bezier(.2,.75,.25,1) both}
.heroInner .eyebrow{box-shadow:0 0 0 1px rgba(255,106,0,.04),0 10px 35px rgba(0,0,0,.25);animation:eyebrowPulse 3.8s ease-in-out infinite}
.hero h1 span{display:inline-block;text-shadow:0 0 42px rgba(255,106,0,.18)}
.downloader,.platformBadges{backdrop-filter:blur(16px);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.platformBadges:hover,.downloader:focus-within{border-color:#4a3a2c;box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 40px rgba(255,106,0,.06)}
.downloader:focus-within{transform:translateY(-2px)}
.primary,.signupButton,.cardDownload{position:relative;overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease}
.primary:after,.signupButton:after,.cardDownload:after{content:"";position:absolute;top:-45%;bottom:-45%;left:-22px;width:12px;background:rgba(255,255,255,.42);transform:rotate(18deg) translateX(-70px);transition:transform .55s ease}
.primary:hover:after,.signupButton:hover:after,.cardDownload:hover:after{transform:rotate(18deg) translateX(260px)}
.primary:hover,.signupButton:hover,.cardDownload:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(255,106,0,.3)}
.brandmark img{animation:brandFloat 4.8s ease-in-out infinite}.brand:hover .brandmark img{animation-duration:1.7s}
.mainNav a{transition:color .2s ease,background-color .2s ease,transform .2s ease}.mainNav a:hover{transform:translateY(-2px)}

.motionReveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.75,.25,1),transform .7s cubic-bezier(.2,.75,.25,1);transition-delay:var(--motion-delay,0ms)}
.motionReveal.motionVisible{opacity:1;transform:none}
.features{overflow:hidden}.features article{position:relative;transition:transform .32s ease,background-color .32s ease,border-color .32s ease}.features article:hover{z-index:2;transform:translateY(-8px);background:#0b1724;border-color:#34445a}.features article h3{font-family:'Archivo Black','Space Grotesk',sans-serif;font-weight:400;letter-spacing:-.035em}.features article b{display:inline-flex;transition:color .25s ease,transform .25s ease}.features article:hover b{color:#fff;transform:translateX(4px)}
.socialLinks a{transition:padding .28s ease,background-color .28s ease,color .28s ease}.socialLinks a:hover{padding-left:18px!important;padding-right:18px!important;background:#091522}.socialLinks a img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}.socialLinks a:hover img{transform:rotate(-8deg) scale(1.14)}
.accordions details{transition:border-color .25s ease,background-color .25s ease,padding .25s ease}.accordions details[open]{border-color:#4b3526;background:#08131f;padding-left:18px;padding-right:18px}.accordions summary{transition:color .2s ease}.accordions details[open] summary{color:var(--accent)}
.videoCard,.communityCard,.adminCard,.authCard,.profilePost{transition:transform .32s cubic-bezier(.2,.75,.25,1),border-color .32s ease,box-shadow .32s ease}.videoCard:hover,.communityCard:hover,.adminCard:hover,.profilePost:hover{transform:translateY(-7px);border-color:#3c4f67;box-shadow:0 26px 62px rgba(0,0,0,.3)}

@keyframes ambientEmbers{0%{transform:translate3d(-1.5%,1%,0) scale(1);opacity:.04}100%{transform:translate3d(1.5%,-1.5%,0) scale(1.06);opacity:.08}}
@keyframes heroBreath{0%{transform:translate3d(var(--hero-x,0),var(--hero-y,0),0) scale(1.04)}100%{transform:translate3d(var(--hero-x,0),calc(var(--hero-y,0) - 9px),0) scale(1.095)}}
@keyframes heroEmbersDrift{0%{transform:translate3d(-1%,2%,0) scale(1);opacity:.52}100%{transform:translate3d(2%,-3%,0) scale(1.08);opacity:.82}}
@keyframes heroEntrance{from{opacity:0;transform:translateY(24px) scale(.99)}to{opacity:1;transform:none}}
@keyframes eyebrowPulse{0%,100%{border-color:#3a2b21;box-shadow:0 10px 35px rgba(0,0,0,.25)}50%{border-color:#68401f;box-shadow:0 0 30px rgba(255,106,0,.11)}}
@keyframes brandFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}}

@media(max-width:900px){.heroBackdrop{inset:-3% -24%}.heroBackdrop img{object-position:62% top}.heroEmbers{opacity:.36}}
@media(max-width:620px){.publicHome:before{opacity:.035}.heroBackdrop{inset:-2% -48%}.heroBackdrop img{object-position:68% top}.heroEmbers{opacity:.28}.motionReveal{transform:translateY(18px)}.features article:hover,.videoCard:hover,.communityCard:hover,.adminCard:hover,.profilePost:hover{transform:none}.accordions details[open]{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.publicHome:before,.heroBackdrop img,.heroEmbers img,.brandmark img,.heroInner,.heroInner .eyebrow{animation:none!important}.motionReveal{opacity:1;transform:none;transition:none}.primary:after,.signupButton:after,.cardDownload:after{display:none}}